JavaScript中的防抖和节流的实现原理

翻滚的胖子
2023-06-19 11:08:03
JavaScript Java

JavaScript中的防抖和节流是常用的函数技巧，可以有效地提升页面的性能和用户体验。

防抖

防抖是指在一段时间内多次触发同一个函数，只执行最后一次触发的函数。

下面是一个简单的防抖函数实现：

function debounce(func, delay) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function() {
      func.apply(context, args);
    }, delay);
  }
}

以上代码中，debounce函数接受两个参数：要执行的函数和延迟时间。函数内部定义了一个计时器timer，每次调用debounce函数时，都会清除之前的计时器，并重新开始计时。当计时器计时结束时，最后一次触发的函数会被执行。

节流

节流是指在一段时间内多次触发同一个函数，只执行一次触发的函数。

下面是一个简单的节流函数实现：

function throttle(func, delay) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    if (!timer) {
      timer = setTimeout(function() {
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  }
}

以上代码中，throttle函数接受两个参数：要执行的函数和延迟时间。函数内部定义了一个计时器timer，每次调用throttle函数时，如果计时器不存在，则会立即执行函数，并重新开始计时。如果计时器存在，则会忽略该次调用。