js 函数的节流和防抖

我们在项目中都会遇到这样的情况：

（1）实时搜索功能，每按键一次就发一次请求，搜索一个词要在短时间内发送十几个请求

（2）用户登录时，点击登录，没有立刻反应，用户就会频繁点击登录按钮，导致发送多个请求

（3）监听页面滚动时，滚动一下也是要频繁触发事件，导致卡死

函数的节流和防抖就是解决这些问题的。

函数节流和函数防抖的理解

函数节流和函数防抖的代码实现

1，函数节流

首先设置一个变量标识，代表是否可以执行操作，设置延时器，每300毫秒可以执行一次操作，300毫秒内，不在重复执行。

  let isSend = false; // 函数节流使用
  handleInputChange(event) {
    if (isSend) {
      return
    }
    isSend = true;
    console.log('执行相应操作');
    // 函数节流
    setTimeout(() => {
      isSend = false;
    }, 300)
  }

2，函数防抖

首先设置一个延时器，进入方法后首先清除上一个延时器，只有在最后一次调用方法的时候，也就是300毫秒内延时器没有被清除，才执行延时器内部的操作。

 let timer = null; // 延时器
  handleInputChange(event) {
    clearTimeout(timer); // 清除上一个延时
    
    // 函数防抖
    timer = setTimeout(() => {
      console.log('执行相应操作');
    }, 300)
  }

参考资料：https://www.cnblogs.com/walls/p/6399837.html