下面是关于利用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 函数，之后的事件触发都会被忽略掉。
本文链接：http://task.lmcjl.com/news/11690.html