函数防抖debounce/函数节流throttle

最新推荐文章于 2024-09-28 09:43:40 发布

原创最新推荐文章于 2024-09-28 09:43:40 发布 · 469 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文深入解析了函数防抖(debounce)与函数节流(throttle)的概念及实现方式，对比了两者在延迟触发与周期触发上的不同，并提供了具体的JavaScript代码示例，帮助读者理解如何在实际开发中有效控制事件触发频率。

函数防抖debounce

函数节流throttle

函数防抖：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发
函数节流：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数
区别

var timeout = null
function debounce(fn, wait){
    return function(){
        if( timeout !== null ) clearInterval(timeout)
        timeout = setTimeout(fn, wait)
    }
}

    
function throttle(func, delay){
    let prev = Date.now()
    return function(){
        let context = this
        let args = arguments
        let now = Date.now()
        if( now - prev >= delay ){
            func.apply(context, args)
            prev = Date.now()
        }
    }
}

function handle(){
    console.log(1)
}

window.addEventListener('scroll', debounce(() => console.log('debounce'), 1000));
window.addEventListener('scroll', throttle(() => console.log('throttle'), 1000));