前端函数抖动和函数节流

2,222 阅读1分钟

函数抖动

1.函数防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。

简单的说,当一个动作连续触发,则只执行最后一次。

打个比方,坐公交,司机需要等最后一个人进入才能关门。每次进入一个人,司机就会多等待几秒再关门。

函数节流

2.限制一个函数在一定时间内只能执行一次。

举个例子,乘坐地铁,过闸机时,每个人进入后3秒后门关闭,等待下一个人进入。

函数防抖的应用场景

连续的事件,只需触发一次回调的场景有:

搜索框搜索输入。只需用户最后一次输入完,再发送请求

手机号、邮箱验证输入检测

窗口大小Resize。只需窗口调整完成后,计算窗口大小。防止重复渲染。

函数节流的应用场景

间隔一段时间执行一次回调的场景有:

滚动加载,加载更多或滚到底部监听

谷歌搜索框,搜索联想功能

高频点击提交,表单重复提交

函数抖动代码实现

  ```javascript
  function _debounce(func,wait){
    var timer;
    return function(){
        clearTimeout(timer);
        timer=setTimeOut(func,wait);
    }
  }
  ```

函数抖动代码实现

  ```javascript
  function _debounce(func,wait){
    var timer;
       if(itmer){
           return;
       }
       return function(){
           timer=setTimeout(function(){
            func();
            timer=null;
           },wait);
       }
  }
  ```