阅读 118

手写一个防抖、节流函数(简略版)

防抖:当某个事件触发的频率过高时,为了避免不必要的性能开销,我们规定这个事件触发后,需要等待一段时间再执行其绑定的逻辑代码,如果在这一段时间内,该事件没有再次触发,就执行这个事件对应的逻辑,否则就重新进行计时等待,确保该事件不被过于频繁的触发。

function debounce(cb, time) {
    let timer = null
    return function () {
        if (timer) {
        // 在规定时间内重新触发此函数的话,那么清除原来计时器 重新计时(核心)
            clearTimeout(timer)
        } 
         timer = setTimeout(() => {
           cb.apply(this, arguments)
         }, time)
    }
}

function change(){
    console.log('触发')
}

//注意要绑定的事件一定是经过debounce处理过的事件,debounce(change,2000),因为这样绑定的函数都是重新在堆里开辟的新函数,每个都会创建新的timer(不再是闭包中被保护的timer)
 window.addEventListener('scroll', debounce(change, 2000))
复制代码

节流和上述防抖的思路类似,它们的不同点是,防抖在事件一直触发的时候是不会执行逻辑的(必须等待对应时间不再次触发事件),而节流则是按照规定时间,必定再次触发。

打个比方:

function throttle (cb, time) {
    let change = false
    return function () {
      if (change) {
      return
    } 
     change = true
     setTimeout(() => {
       change = false
       cb.apply(this, arguments)
     }, time)
  }
}

function change(){
    console.log('触发')
}

window.addEventListener('click', throttle(change, 1000))
复制代码
文章分类
前端
文章标签