JS优化常用片断

防抖debounce装饰器

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

function debounce(func, delay) {
  let isCooldown = false;
  return function() {
    if (isCooldown) return;
    func.apply(this, arguments);
    isCooldown = true;
    setTimeout(() => isCooldown = false, delay);
  };
}

 

节流throttle装饰器

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

function throttle(func, delay) {

  let isThrottled = false,
    savedArgs,
    savedThis;

  function wrapper() {

    if (isThrottled) { // (2)
      savedArgs = arguments;
      savedThis = this;
      return;
    }

    func.apply(this, arguments); // (1)

    isThrottled = true;

    setTimeout(function() {
      isThrottled = false; // (3)
      if (savedArgs) {
        wrapper.apply(savedThis, savedArgs);
        savedArgs = savedThis = null;
      }
    }, delay);
  }

  return wrapper;
}

2者区别：

• 函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样。
• 函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。

应用场景：

• debounce
  • 　　search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
  • 　　window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次。
• throttle
  • 　　鼠标不断点击触发，mousedown(单位时间内只触发一次)。
  • 　　监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断。

参考文档：

装饰和转发，call/apply

7分钟理解JS的节流、防抖及使用场景