一、背景

在日常使用中，用户在进行搜索时，没输入一个字就会触发接口请求，这样就会造成网络请求繁忙；用户在下拉滚动调的时候，由于速度过快也会造成频繁触发接口调用。

二、防抖

防抖，顾名思义，防止抖动。用于将用户的操作行为触发转换为程序行为触发，防止用户操作的结果抖动。一段时间内，事件在我们规定的间隔 n 秒内多次执行，回调只会执行一次。

前端中的防抖和节流

 1 /**
 2  * 防抖
 3  * @param {function} fn 
 4  * @param {number} delay 
 5  */
 6 function debounce(fn, delay = 500){
 7     let timer = null
 8     return function(){
 9         if(timer) {
10             clearTimeout(timer)
11         }
12         timer = setTimeout(()=>{
13             fn.apply(this, arguments)
14             clearTimeout(timer)
15         },delay)
16     }
17 }

三、节流

节流，顾名思义，控制流量。用于用户在与页面交互时控制事件发生的频率，一般场景是单位的时间或其它间隔内定时执行操作。一段时间内，事件在每次到达我们规定的间隔 n 秒时触发一次。

 1 /**
 2  * 节流
 3  * @param {function} fn 
 4  * @param {number} delay 
 5  */
 6 function throttle(fn, delay = 100){
 7     let timer = null
 8     return function(){
 9         if(timer) return
10         timer = setTimeout(()=>{
11             fn.apply(this, arguments)
12             timer = null
13         }, delay)
14     }
15 }

前端中的防抖和节流

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。