函数防抖与节流

一、函数防抖

1.原理

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

2.适用场景

（1）搜索框搜索输入。只需用户最后一次输入完，再发送请求；
（2）用户名、手机号、邮箱输入验证；
（3）浏览器窗口大小改变后，只需窗口调整完后，再执行 resize 事件中的代码，防止重复渲染

//防抖函数
function debounce(fn,wait) {
   let timer = null
  return function () {
     let arg = arguments;
     let _this = this;
     if (timer) {
          clearTimeout(timer);
          timer = null;
      }
     let timer = setTimeout(()=>{
        fn.apply(_this,arg);
     },wait) 
  }
}
 
let fn = ()=>{
  console.log('触发函数')
}

 
setInterval(debounce(fn,1000),500);

二、函数节流

1.原理

每隔一段时间，只执行一次函数。

2.适用场景

（1） 懒加载、滚动加载、加载更多或监听滚动条位置；
（2）百度搜索框，搜索联想功能；
（3） 防止高频点击提交，防止表单重复提交；

//节流函数
function throttle(fn,gaptime){
   let lasttime = null;
   return function(){
      let nowtime = new Date();
      if(nowtime - lasttime>gaptime||!lasttime){
          fn();
          lasttime = nowtime
      }
   }
}
let fn = ()=>{
  console.log('触发函数')
}
 
setInterval(throttle(fn,1000),500);

三、防抖与节流的比较

1、相同点：
（1） 都可以通过使用 setTimeout 实现。
（2）目的都是，降低回调执行频率，节省计算资源。
2、不同点：
（1） 函数防抖，在一段连续操作结束后，处理回调，关注一定时间连续触发的事件只在最后执行一次。
（2）函数节流，在一段连续操作中，每一段时间只执行一次，侧重于一段时间内只执行一次。