JavaScript中防抖和节流的实现

JavaScript中防抖和节流的实现

这篇文章写起来主要是因为上一篇文章说起了闭包的由来，但是篇幅有限没介绍其应用。

先说一下防抖和节流的概念，然后分别举一个例子

防抖

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

场景示例

要求用户在输入框内输入文本后3s后触发查询，如果输入后3s内又输入了新的内容，则继续等待三秒。

代码示例

function debounce(fn,delay) {
  let timeout = null;
  return function () {
   if(timeout){
     clearTimeout(timeout);
   }
   timeout = setTimeout(() => {
    fn.apply(this, arguments);
   },delay);
  }
}
const quert = function(input){
  ***
  return XXX
}
const handleInput = debounce(query,3000)

然后我们把handleInput绑定到change事件上就行了~~

节流

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。稀释事件执行频率。

场景示例

电话客服比较忙，对于客户的提问，他们每30分钟只顾得上回应一次，其余时间内不做处理（当然这都是假设哈哈，这要是这样那哪里行）

代码示例

function throttle(fn,delay) {
  let flag = false;
  return function () {
   if (flag) {
     return;
   }
   flag = true;
   setTimeout(() => {
     flag = false;
     fn.apply(this, arguments);
   }, delay);
  }
}
const server = function(query){
  ***
  return XXX
}
const handleServer = throttle(server,30*60*1000)

还有一种方式是时间戳，大家这个就自行查阅了哈

防抖和节流说白了都是使用一个标识来记录函数是应该直接忽略还是可以直接触发。而这个标识，正是通过闭包来实现的。如果没有闭包的话，就需要一个外部变量来记录。这样做也不是不可以，主要是担心外部变量被污染到。（当然，闭包的由来可不是为了变量不被污染，具体自行查阅上一篇文章）