2021-06-18 js 防抖与节流

节流：
在规定的单位时间内，只能有一次触发事件的回调函数执行，如果同一单位之间内某事件被多次触发，只能有一次生效。

function pay(){
    console.log("aaaa");
}
function throttle(func,delay){
    let timer;
    return function(){
        let context=this;
        let args=arguments;
        if(!timer){
        //如果没有事件正在执行，则定时器执行函数，并在事件结束后清空定时器
            timer=setTimeout(function(){
                func.apply(context,args);
                timer=null;
            },delay)
            
        }
        
    }
}
window.addEventListener('resize',throttle(pay,2000))

防抖：
指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

//防抖 指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
//func 函数
//如果不使用闭包，会出现没有进行事件，就调用了func函数

function debounce(func,delay){
    let timeout;//如果将timeout定义在return中，那么每次点击事件之间没有联系，还是会执行多次。只定义一次timeout，不断给其赋值，进行延时，清楚上一次赋的值。
    return function(){
        let context=this;//不保存this，执行settimeout时会指向window。
        let args=arguments;
        if(timeout){
            clearTimeout(timeout);//如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
        }
        timeout=setTimeout(()=>{
            func.apply(context,args);
        },delay);
    }
}
function pay(){
    console.log("顶顶顶顶")
}
const button=document.querySelector("input");
button.addEventListener("click",debounce(pay,1000))