防抖节流的含义使用场景及js实现原理

1.防抖：n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时。代码实现重在清零 clearTimeout。

　　应用：登录，提交，浏览器窗口的resizes事件，文本编辑保存

//防抖函数
    function debounce (f, wait) {
　　　　　//设置一个定时器
        let timer; 
        return (...args) => {   
　　　　　//单位时间内再次点击将把未来的发生的点击事件扼杀在摇篮之中，并重新计时，类似中断回城             
            clearTimeout(timer)             
            timer = setTimeout(() => {      
                f(...args)
            }, wait)
        }
    }
let count = 0;
let divEl = document.getElementById("submitBtn");
//真正执行的请求时间
function moveFn(){
   console.log('ajax请求:'+count++)
}
//divEl.addEventListener("click", moveFn,false)
divEl.addEventListener("click", debounce(moveFn, 3000));

 

2.节流：n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效，响应平滑。

　　应用：scroll 事件，input的实时搜索

function throttle(func, wait) {
　　// 记录上一次执行 func 的时间
    let prev = 0
    return function (...args) {
　　　　　　// 当前触发的时间（时间戳）
        const now = Number(new Date())
　　　　　　// 只有当当前时间超过上次点击单位时长后才去执行方法func，类似在公交车站等公交
        if (now >= prev + wait) {
　　　　　　　　// 符合条件执行 func 时，需要更新 prev 时间
            prev = now
            func.apply(this, args)
        }
    }
}
divEl.addEventListener("click", throttle(moveFn, 1000));

 

3.通俗易懂的接地气的防止重复点击的写法

let canCLick = true
divEl.addEventListener("click",()=>{
    if(canCLick){
        canCLick = false
        console.log('提交')
        setTimeout(function(){
            canCLick = true
        },1000)
    }
});