JavaScript原生实现的节流和防抖

1.防抖

  防抖:在高频触发下,在n秒内只触发一次(非严格)。如果n秒内再次触发,则重新计时

//实现debounce
function debounce(fn){
    let timer = null                    //创建一个命名存放定时器返回值
    return function (){
        clearTimeout(timer)                //输入前先杀掉前一个定时
        timer = setTimeout(() => {        //创建一个新的
            fn.apply(this, arguments)    //时间到执行fn回调函数
        }, 500)
    }
}

2.节流

  节流:在高频触发下,在n秒内只触发一次(严格)。如果多次触发,则直接忽略,等待第一个触发完毕。

  //实现throttle
  function throttle(fn){
    let flag = true          //通过闭包保存一个标记
    return function (){
        if(!flag) return     //正在定时执行,直接返回
        flag = false         //没有定时在执行,添加定时执行
        setTimeout(() => {     //定时过程中flag一直为false,下一次触发直接被返回
            fn.apply(this, arguments)
            flag = true
        },2000)
    }
}

 

posted @ 2021-03-12 11:27  xiaoxu1024  阅读(89)  评论(0)    收藏  举报