JS的去抖、节流

最新推荐文章于 2021-09-23 16:13:13 发布

anshaobiao6449

最新推荐文章于 2021-09-23 16:13:13 发布

阅读量90

点赞数

原文链接：http://www.cnblogs.com/amiezhang/p/10482098.html

版权

本文深入探讨了JavaScript中去抖(debounce)和节流(throttle)的技术细节，包括它们的功能实现及应用场景。去抖确保在多次触发后仅执行一次回调，而节流则规定在单位时间内只允许触发一次函数。

摘要由CSDN通过智能技术生成

去抖(debounce)

　　在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

function debounce(fn, delay) {
    let timer = null;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, delay)
        }, delay);
    }
}

表现：

节流(throttle)

　　规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

function throttle(fn, delay) {
    let last_time = Date.now() - delay;
    return function() {
        let now = Date.now();
        if (now - last_time < delay) {
            return;
        }
        last_time = now;
        fn.apply(this, arguments)
    }
}