本文共 1151 字，大约阅读时间需要 3 分钟。

JS实现防抖与节流（按钮触发事件）

引言：

手写JS的防抖与节流

防抖（Debounce）和节流（Throttle）是前端开发中常见的需求，用于避免事件过于频繁地触发。在实际项目中，尤其是涉及用户交互的表单或实时数据处理时，这两种技术能大大提升用户体验。以下是实现防抖与节流的JS代码示例。

防抖代码示例：

function debounce(fn, wait) {    let task = null;    return function () {        if (task) {            console.log('清除计时器');            clearTimeout(task);        }        task = setTimeout(() => {            console.log('设置了计时器');            fn.apply(this, arguments);        }, wait);    };}function fun1() {    console.log('btn1的函数执行了');}var btn1 = document.getElementById('debounce');btn1.addEventListener("click", debounce(fun1, 2000));

节流代码示例：

function throttle(fn, wait) {    let task = null;    return function () {        if (!task) {            console.log('设置了task定时器');            task = setTimeout(() => {                task = null;                fn.apply(this, arguments);            }, wait);        }    };}function fun2() {    console.log('btn2的函数执行了');}var btn2 = document.getElementById('throttle');btn2.addEventListener('click', throttle(fun2, 2000));

执行效果：

在实际操作中，您可以看到防抖按钮（id="debounce"）在快速点击时不会连续多次执行函数fun1，而节流按钮（id="throttle"）在短时间内同样不会多次触发fun2。这种设计能够有效减少不必要的事件处理，提升用户体验。

转载地址：http://gdxpz.baihongyu.com/