防抖与节流

无论防抖还是节流,目的是减少函数执行频率或次数

先说节流,都用过水龙头吧,怎么节约水?调整阀门,水线变为点,一滴一滴,这就是节流

有个按钮, 疯狂点, 回调函数疯狂执行,就像一条线,如下图所示
函数被节流后,即使疯狂点,仍像节流后的水龙头,一滴一滴的执行

线and点.png

这是我随手画的...有点丑就别计较了

展示一下代码吧, 自己写的,可以提意见,比如把时间提出来。。。

function throttle(func){
      let exec = true
      let timer = null
      return function(){
        if(exec){
          func()
          exec=  false
        }else{
          if(timer){}
          else{
            timer = setTimeout(()=>{
              exec = true
              // clearTimeout(timer)
              timer = null
            },1000)
          }
        }
      }
    }

节流说了,说一下防抖吧,相对于节流,防抖简单一点
防抖的思想就是在一段时间内,只延时执行一次目标函数
有一个网站,很长,就是由滚动条,如果这个网站有段类似这样的代码:

window.addEventListener('scroll',handle)

那么拉动滚动条,就会疯狂回调hanle函数
为了减少回调次数,可以使用防抖,直接上代码吧

 function debounce(func){
      let timer = null
      return function(){
        if(timer){clearTimeout(timer)}
          timer=  setTimeout(()=>{
            func()
          },1000)
      }
    }

你可能感兴趣的:(防抖与节流)