js中性能优化之函数防抖

定义

在限制时间内如果多次调用同一个函数，那么后一次的调用会清空之前的调用，只进行最新一次的函数调用。
简单来说就是在限制时间内函数只执行最后一次调用。

适用场景

1、 高频率触发场景如：window.onresize事件、mousemove事件、scroll事件等
2、 输入框根据输入内容进行搜索时，频繁输入只请求最后一次输入
3、 频繁的操作取消和提交等

实现原理

由定义可知要保证在限制时间内执行最后一次调用，那么在最后一次函数调用的时候就需要吧之前的操作全部清除才可以。可以使用js中自带的setTimeout 方法延迟调用一个函数，在未调用期间还有其他调用的话就使用clearTimeout方法将上一次的调用直接清除即可。

代码实现

  const debounce = (fn, time = 300) => {
    let timer;
 
    return function(...res) {
      clearTimeout(timer);
      let _this = this;
 
      timer = setTimeout(() => {
        fn.apply(_this, res);
      }, time)
    }
  }
 

上述代码使用setTimeout方法实现一个简单的防抖功能，注意执行函数的this指向问题。

测试

  window.onresize = debounce(function() {
    console.log(1111)
  }, 1000)