简单记录下防抖和节流吧

触光

2021 年 10 月 14 日

951 次浏览

暂无评论

1444字数

经验分享

这种问题吧,虽然说有组件等等可以解决,但是吧,东西还是得自己会的,下来就简单的记录下防抖节流吧。

应用场景

在进行窗口的 resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常差,此时我们可以采用 debounce（防抖）和 throttle（节流）的方式来减少调用频率,又不影响显示效果。

函数防抖：

函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执
行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时,简单说就是频繁操作只执行最后一次操作.

常见场景：模糊搜索

function debounce (fn, delay) {
  let timer = null;
  return function (...args) {
    // 重置：先清空+赋值
    timer && clearTimeout(timer);
     timer = setTimeout(() => {
      fn.apply(this, args);
   }, delay);
  };
}

函数节流

函数节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理,简单说就是间隔某个时间执行一次函数

常见场景：触底加载

function throttle (fn, interval) {
  let on = true;
  return function (...args) {
    if (on) {
        fn.apply(this, args);
      on = false;
      setTimeout(() => {
        on = true;
      }, interval);
    }
  };
}

总结

函数防抖：将几次操作合并为一次操作进行。原理是维护一个计时器，规定在延迟时间后触发函数，但是在延迟时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

函数节流：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发。

区别:

函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。而函数防抖只是在最后一次事件后才触发一次函数。比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来操作。