防抖debounce和节流throttle

2020-08-03T23:27:59

防抖debounce

什么是防抖

个人理解是当用户某个高频动作暂停的时候,才会触发

使用场景

  • 监听输入框,文字发生变化后触发事件
  • 射击游戏中mousedown、keydown事件
  • scroll事件等高频触发的事件

debounce函数封装

debounce是对函数的封装,最终应该返回一个函数。这种闭包的写法使得减少了一个全局变量,整体更加整洁;也将这个timer保护了起来,不会被外界轻易的修改,以免放生逻辑的混乱。

function debounce(fn, delay = 500){
    // timer是在闭包中的
    let timer = null 
    if(timer) {
        clearTimeout(timer)
    }
    timer = setTimeout(() => {
         // 绑定参数,并执行函数 
        fn.apply(this, arguments)
        timer = null
    })
}

节流 throttle

无论动作有多快,都固定时间触发一次。

使用场景

  • 在拖拽事件中,无论拖拽的有多快,都会固定时间获取一次元素的位置,如果不节流很容易造成卡顿

throttle函数封装

function throttle(fn, delay = 100) {
    let timer = null
    return function() {
        if(timer) {
            return
        }
        timer = setTimeout(() => {
             // 绑定参数,并执行函数 
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}
当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »