javascript 函数的节流（throttle）

最新推荐文章于 2024-04-04 02:06:39 发布

原创最新推荐文章于 2024-04-04 02:06:39 发布 · 220 阅读

0 ·

CC 4.0 BY-SA版权

前端基础专栏收录该内容

51 篇文章

订阅专栏

本文深入解析了节流(throttle)技术，这是一种降低事件处理频率的方法，尤其适用于滚动条或窗口大小调整事件。通过限制函数调用频率，可以有效提升用户体验并优化资源消耗。文中提供了节流函数的具体实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

节流(throttle): 每隔一段时间后执行一次，也就是降低频率，将高频操作优化成低频操作，通常使用场景: 滚动条事件或者 resize 事件，通常每隔 100~500 ms执行一次即可

function throttle(fn, wait, immediate) {
    let timer = null
    let callNow = immediate
    
    return function() {
        let context = this,
            args = arguments

        if (callNow) {
            fn.apply(context, args)
            callNow = false
        }

        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(context, args)
                timer = null
            }, wait)
        }
    }
}