防抖和节流

最新推荐文章于 2025-11-28 10:25:57 发布

原创最新推荐文章于 2025-11-28 10:25:57 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

js面试题专栏收录该内容

1 篇文章

订阅专栏

在开发中，频繁的事件触发如搜索请求、轮播图切换、鼠标移动等可能导致性能问题。防抖技术确保在设定时间内只执行最后一次调用的函数，而节流则保证在一定间隔内只执行一次。文章提供了防抖和节流的实现代码示例，以帮助解决这类性能挑战。

在平时开发的过程中，会有很多场景会频繁触发事件，比如说搜索框的实时发请求，疯狂点轮播图换图，onmousemove,resize,onscroll等等，这种频繁的操作会导致性能的问题，所以要用上防抖和节流

防抖：事件相应函数在一段时间后才执行，如果在这段事件内再次调用，则重新计算执行时间；当预定的时间内没有再次调用该函数

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

节流：如果你持续触发事件，每隔一段时间，只执行一次事件

function throttle (fn, delay) {
    let now = new Date().getTime();
    return function () {
        if (new Date().getTime() - delay > now) {
            setTimeout(() => {
                fn(arguments);
            }, delay);
        }
    }
}