JavaScript中的防抖 (debounce) 和节流 (throttle) 是两种用于控制函数调用频率的技术。这两种技术可以用来优化用户体验，特别是当使用者输入时，这两种技术可以有助于控制过度的交互。本文将介绍如何使用JavaScript实现这两种技术。
防抖 (debounce)
防抖 (debounce) 是一种技术，用于确保在特定的时间段内，函数只被调用一次。例如，如果函数在每次点击事件中都被调用，则可以使用防抖来限制函数仅在特定延迟后调用一次。
要实现防抖，可以使用JavaScript的setTimeout()函数。如下所示：
function debounce(fn, delay) {
let timer;
return function () {
let context = this; // 保存 this
let args = arguments; // 保存参数
clearTimeout(timer); // 清除上次定时器
timer = setTimeout(function(){ // 新建一个定时器
fn.apply(context, args); // 执行函数
}, delay);
}
}
上面的代码定义了一个debounce()函数，它接收一个函数和一个延迟时间作为参数，并返回一个新的函数。这个新的函数会在指定的延迟时间后执行传入的函数，从而实现防抖的功能。
节流 (throttle)
节流 (throttle) 是一种技术，用于限制函数的调用频率，使其在特定的时间段内只被调用一次。例如，如果函数在每次点击事件中都被调用，则可以使用节流来确保它在一定时间段内只被调用一次。
要实现节流，可以使用JavaScript的setTimeout()函数，如下所示：
function throttle(fn, interval) {
let timer;
return function () {
let context = this; // 保存 this
let args = arguments; // 保存参数
if (!timer) { // 如果定时器不存在
timer = setTimeout(function () { // 新建一个定时器
fn.apply(context, args); // 执行函数
timer = null; // 清空定时器
}, interval);
}
}
}
上面的代码定义了一个throttle()函数，它接收一个函数和一个时间间隔作为参数，并返回一个新的函数。这个新的函数会在在指定的时间间隔内只调用一次传入的函数，从而实现节流的功能。
小结
本文讨论了如何使用JavaScript实现防抖 (debounce) 和节流 (throttle) 技术。防抖技术可以用来限制函数在特定的时间段内只被调用一次，而节流技术可以用来限制函数的调用频率，使其在一定时间段内只被调用一次。这两种技术可以用来优化用户体验，特别是当使用者输入时，这两种技术可以有助于控制过度的交互。
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天，点击查看活动详情
