利用JavaScript实现防抖节流函数的示例代码

下面是关于利用JavaScript实现防抖和节流函数的完整攻略。

什么是防抖和节流？

在讲解防抖和节流函数具体实现之前，先简单介绍一下它们的概念。

防抖

防抖是指在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。通俗地讲，就是在用户不断操作的情况下，只有在用户最后一次操作完毕后一定时间内才会触发事件。

节流

节流是指在一定时间间隔内只执行一次回调函数。通俗地讲，就是在用户不断操作的情况下，如果触发的频率大于一定限定值，就会被忽略掉，只有在限定时间的间隔内，第一次触发会执行一次回调函数，之后如果触发的频率还没有达到限定值则也会被忽略。

防抖函数实现

利用 JavaScript 实现防抖函数的思路很简单，即设置一个计时器，当用户触发事件时，如果计时器存在，则清除计时器并重新计时；如果计时器不存在，则说明需要首次执行回调函数。下面是一个简单的防抖示例代码：

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

其中，func 为需要执行的函数，wait 为一个计时器延迟的时间（以毫秒为单位）。

使用该防抖函数的示例代码如下：

const btn = document.querySelector('#btn');
btn.addEventListener('click', debounce(handleClick, 1000));

function handleClick() {
  console.log('按钮被点击了');
}

上面的示例代码中，会在按钮被点击后的1秒钟内如果没有其他的点击事件，就会触发 handleClick 函数。

节流函数实现

利用 JavaScript 实现节流函数的思路也很简单，即使用一个标记变量来判断是否已经执行了回调函数，在一定的时间间隔内，只有第一次触发事件时，才会执行回调函数，之后忽略后续的事件触发。下面是一个简单的节流示例代码：

function throttle(func, wait) {
  let canRun = true;
  return function() {
    let context = this;
    let args = arguments;
    if (!canRun) return;
    canRun = false;
    setTimeout(function() {
      func.apply(context, args);
      canRun = true;
    }, wait);
  }
}

其中，func 为需要执行的函数，wait 为一个时间间隔（以毫秒为单位）。

使用该节流函数的示例代码如下：

const btn = document.querySelector('#btn');
btn.addEventListener('click', throttle(handleClick, 1000));

function handleClick() {
  console.log('按钮被点击了');
}

上面的示例代码中，会在按钮被点击后的1秒钟内，只有第一次点击会触发 handleClick 函数，之后的事件触发都会被忽略掉。