JS中节流函数介绍与实现（秒懂如何手写节流）

节流函数用于限制函数在一定时间内只能执行一次。通常用于防止按钮在短时间内被重复点击，防止鼠标移动过快等情况。

以下是一个简单的节流函数实现：

function throttle(fn, wait) {
    let timeout = null;
    return function() {
        let context = this;
        let args = arguments;
        if (!timeout) {
            timeout = setTimeout(() => {
                fn.apply(context, args);
                timeout = null;
            }, wait);
        }
    };
}
 
// 使用示例
function handleScroll() {
    console.log("滚动事件被触发了");
}
 
window.onscroll = throttle(handleScroll, 200);

在这个例子中，throttle 函数返回一个新的函数，该新函数在被调用时会设置一个 setTimeout。如果在 wait 指定的时间内再次调用返回的函数，它会清除当前的 setTimeout 并重新设置一个。这样，在指定的时间内，事件处理函数 handleScroll 只会被调用一次，即实现了节流功能。