js的防抖与节流函数

前言：

在实际开发中，许多地方会出现短时间内可能频繁请求服务器的业务出现，如百度一下的搜索联想词。

代码的一般实现方式设置为：监听用户的输入事件，用户每输入一次便立即去请求一次服务器，那么当用户输入“test”时，会请求四次服务器，这样会给服务器造成巨大压力。

这时就需要对那些“频繁触发的函数(请求)”进行节流或防抖处理了

正文：

1、防抖debounce

input的验证、联想

抖动：抖动可以理解为你的回调函数（如请求函数）的不断触发，而触发的原因正是用户的不断输入。

思路：当你的函数不再抖动，即用户停止输入并超过了一段时间，才开始触发回调函数。这时可以设置一个timer计时器并开始计时，每接收到一次用户输入，复位这个计时器。当计时器时间超过了设定值，则触发回调函数。

实现：

debounce(fn, delay) {
  let timer = null;//定时器

  return function(...args) {//返回主体函数(可以传入参数)
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.apply(this, args);//业务函数
    }, delay)
  }
}


//测试时
const callback = debounce(fn, 500)
callback(arguments)//调用函数，参数可有可无

2、节流throttle：

scroll滑动、鼠标移动

节流：按字面意思来强行解释的话可以直接理解为节省流量，即单位时间内只提供有限的资源，稳定而持续分配。

思路：应用到代码，即设置“最高长官”。对于scroll，规定每隔200ms，回调函数只能触发一次，该时间内的其他scroll事件都不能触发该回调函数。

实现：

throttle(fn, delay=300) {
  let timer = null;//定时器

  return function(...args) {//返回主体函数
    if (timer) {
      return;
    }
    timer = setTimeout(() => {
      fn.apply(this, args);//业务函数
      timer = null;
    }, delay)
  }
}