【前端学习——js篇】2.节流与防抖

具体可见https://github.com/febobo/web-interview

2.节流与防抖

防抖：连续触发事件但是在设定的一段时间内中只执行最后一次。【重新开始】

【解释】：lol回城被打断，只能重新B

应用场景：搜索框搜索输入、文本编辑器实时保存

let timerF = null
//鼠标点击
document.querySelector('.ipy').onmousedown = function(){
    // 防抖
    if(timerF !== null){
        clearInterval(timerF)
    }
    timerF = setTimeout(() =>{
        console.log(`我是防抖`);
    },1000)
}

每点击都会清空timer，重新开始。

节流：连续触发事件但是在设定的一段时间内只执行一次函数。【不要打断我】

【解释】：lol传送只能在传送完后去做另一些事情。（没有击飞，沉默等控制技能）

应用场景：高频事件（快速鼠标点击、鼠标滑动、resize事件、scroll事件）、下拉加载、视频播放记录事件等

//节流
let timerJ = null
//鼠标点击
document.querySelector('.but').onmousedown = function(){
    // 防抖
    if(timerJ !== null){
        return
    }
    timerJ = setTimeout(() =>{
        console.log(`我是节流`);
        timerJ = null
    },1000)
}

每次点击都不会打扰执行当前事件。