JavaScript中的防抖和节流技术

翻滚的胖子
2023-06-17 09:57:27
JavaScript Python

防抖和节流是优化前端性能的两种常用技术，它们可以有效减少DOM操作、减轻浏览器负担，提高页面性能的同时，还可以避免一些不必要的BUG。

一、什么是防抖和节流

防抖（debounce）和节流（throttle）都是为了限制函数的执行频次，从而优化函数的性能。

防抖指的是在一定时间内，多次触发同一事件，只执行最后一次，或者只执行第一次。

而节流指的是在一定时间内，只执行一次事件，即使该时间段内该事件被触发了多次。

二、防抖和节流的作用

防抖和节流的主要目的是为了优化函数的性能，减少函数执行的次数。

在前端开发中，有些事件会被频繁地触发，比如浏览器窗口的resize事件、滚动事件等。如果我们直接在这些事件的回调函数中执行函数，会导致页面的性能下降，甚至会出现一些不必要的BUG。

这时候，我们可以使用防抖和节流技术来限制函数的执行频次，从而避免这些问题的出现。

三、如何实现防抖和节流

1. 防抖

防抖的实现逻辑很简单，我们只需要在一定时间内清空定时器，再重新设置一个新的定时器即可。

function debounce(fn, delay) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  }
}

上述代码中，我们定义了一个debounce函数，它接受两个参数：要执行的函数fn和延迟时间delay。

在返回的函数中，我们使用clearTimeout清空了之前的定时器，然后重新设置了一个新的定时器，延迟时间为delay。

当事件被触发时，如果在delay时间内再次触发该事件，我们就会清空之前的定时器，重新设置一个新的定时器，从而达到防抖的效果。

2. 节流

节流的实现逻辑稍微复杂一些，我们需要使用一个时间戳来判断是否到达了规定的时间间隔。

function throttle(fn, delay) {
  let timer = null;
  let lastTime = 0;
  return function() {
    const now = Date.now();
    if (now - lastTime > delay) {
      clearTimeout(timer);
      fn.apply(this, arguments);
      lastTime = now;
    } else {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, arguments);
        lastTime = now;
      }, delay);
    }
  }
}