防抖与节流

---

节流与防抖就像重绘和回流一样重要,都是为了提高性能,一直以为博客里面已经写了,结果发现没有,现在补一下

防抖(debounce)

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

分解一下需求：

• 持续触发不执行
• 不触发的一段时间之后再执行

我们什么场景下会用到呢

举个例子,我们想要让搜索的输入框输入后,开始查询,调用后端的接口,但是直接监听input的change事件,每按一下键盘,就去调用接口了,但是这个时候,用户其实并没有输入完他的关键字,这个时候,就需要用到函数防抖了

// 函数防抖的实现
function debounce(fn, wait) {
  var timer = null;
  return function() {
    var context = this,
    args = arguments;
    // 如果此时存在定时器的话，则取消之前的定时器重新记时
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
    // 设置定时器，使事件间隔指定事件后执行
    timer = setTimeout(() => {
      fn.apply(context, args);
    }, wait);
  };
}

节流(throttle)

函数节流：规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

分解一下需求：

• 持续触发并不会执行多次
• 到一定时间再去执行

假设,刚刚的那个需求变了,产品发现有一些用户疯狂的敲键盘输入,但是我们的搜索列表就是为空,所以希望每隔一定的时候就要去调用接口,所以当我们监听input的change事件的时候,需要使用到函数节流了,持续触发不会执行,但是到了一定的时间就会开始执行

// 函数节流的实现;
function throttle(fn, delay) {
  var preTime = Date.now();
  return function() {
    var context = this,
    args = arguments,
    nowTime = Date.now();
    // 如果两次时间间隔超过了指定时间，则执行函数。
    if (nowTime - preTime >= delay) {
      preTime = Date.now();
      return fn.apply(context, args);
    }
  };
}

总结

函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。

函数节流是指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。节流可以使用在 scroll 函数的事件监听上，通过事件节流来降低事件调用的频率。

以上就是我对防抖和节流的一些理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的博文,以避免误人子弟。