JavaScript原生实现的节流和防抖

时间：2021-03-15 10:29:33 收藏：0 阅读：0

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)
    }
}