防抖与截流总结

//防抖 是指在事件触发结束后延时一段时间再去执行代码，如果在延时期间再次触发该事件，则重新计算延时时间
//第一个参数为事件触发后需要执行的方法，第二个参数为延时时间function debounce(method, delay) {
function debounce(method, delay) {
    let timer = null;
    
    return function () {
        //this 指向调用的他的函数 arguments是调用它的一下属性参数
        let context = this, args = arguments;
        console.log(args)
        if(timer){
            clearTimeout(timer);
            timer = null;
        } 
        timer = setTimeout(function () {
            method.apply(context, args);
        }, delay);
    }
}
let fun= debounce(() => {
        console.log('123');
}, 600);
window.addEventListener('resize', fun);

//截流 是指在规定时间内只触发一次事件，减少事件执行的频率
function throttle(func, wait) {
    let lastTime = null
    let timeout
    return function () {
        let context = this;
      
        let now = new Date();
        let arg = arguments;
        // 如果上次执行的时间和这次触发的时间大于一个执行周期，则执行
        if (now - lastTime - wait > 0) {
            // 如果之前有了定时任务则清除
            if (timeout) {
                clearTimeout(timeout)
                timeout = null
            }
            func.apply(context, arg)
            lastTime = now
        } else if (!timeout) {
            timeout = setTimeout(() => {
                // 改变执行上下文环境
                func.apply(context, arg)
            }, wait)
        }
    }
}
let quest = throttle(()=>{console.log("数据判断完成")},1000)
let btn = document.getElementsByTagName('button')[0];
btn.addEventListener('click',quest)