js性能优化之节流防抖函数

js性能优化之节流防抖函数

我们在书写js时经常会遇到一些频繁触发的事件，比如窗口滚动、鼠标移动或者输入框输入等。如果我们直接将事件处理函数绑定到这些事件上，可能会导致函数被频繁调用，从而降低应用程序性能。为了解决这个问题，我们可以使用节流（throttle）和防抖（debounce）这两个技术,下面就手写来实现这两个函数。

1、防抖（Debounce）函数

防抖：一段时间内执行多次，只保留最后一次。
快速记忆：形如MOBA游戏中的回城，点多次回城都只执行最后一次

function debounce(fn, delay = 500) {//fn为实际业务逻辑
  let timer = null;
  return function () {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);//通过apply修改指向，使得fn的this正确的指向它的业务事件源
      timer = null;
    }, delay);
  };
}

2、节流（Throttle）函数

节流：一段时间内执行多次，要等待上一次的执行完毕才能执行下一次。
快速记忆：形如MOBA游戏中的技能cd，冷却完才能继续执行

function throttle(fn, delay = 500) {
  let timer = null;
  return function () {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}

通过使用这两种技术，我们可以有效地控制函数的执行频率，提高应用程序的性能。