本文主要是介绍JS实现防抖（Debounce）和节流（Throttle），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
防抖（Debounce）和节流（Throttle）是用于限制函数调用频率的两种常用技术，可以帮助你控制事件处理函数的执行次数。下面分别是防抖和节流函数的实现示例。
防抖函数（Debounce）
防抖函数意味着当事件被触发后，要等待一段时间（等待时间间隔）后才执行函数。如果在等待时间内再次触发事件，将重新计时。如实时监听输入事件，防止用户多次点击按钮可用到
function debounce(func, delay) {let timeoutId;return function (...args) {clearTimeout(timeoutId);timeoutId = setTimeout(() => {func.apply(this, args);}, delay);};
}// 用法示例：
const debouncedFunction = debounce(function() {console.log("Debounced function called");
}, 1000);// 调用 debouncedFunction 会在 1 秒后执行，如果在 1 秒内再次调用，则重新计时
debouncedFunction();
节流函数（Throttle）
节流函数意味着在一段时间内最多只能执行一次函数，无论事件触发频率多高。如滚动事件，表单提交按钮
function throttle(func, delay) {let canRun = true;return function (...args) {if (!canRun) return;canRun = false;setTimeout(() => {func.apply(this, args);canRun = true;}, delay);};
}// 用法示例：
const throttledFunction = throttle(function() {console.log("Throttled function called");
}, 1000);// 调用 throttledFunction，每隔 1 秒执行一次，多次调用在等待期间不会执行
throttledFunction();
这篇关于JS实现防抖（Debounce）和节流（Throttle）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
