js基础

防抖和节流

防抖

var debounce =function(fn,deplay) {
    let timer = null;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(()=> {
            fn.apply(this,arguments);
        },deplay)
    }
}

触发事件后n秒内只执行一次，如果n秒内再次触发就会重新计算时间。

n秒内多次点击都会在下一次点击清除掉上一次点击的timer，一旦点击累了，最后一次点击会被整体执行

防抖带immediate

var debounce = function(fn,deplay,immediate) {
    let timer ,context,args;
    
    //延时执行函数
    let later =() =>setTimeout(()=> {
        timer = null;
        if(!immediate){
            fn.apply(context,args);
            context = args = null;
        }
    },deplay)
     //每次实际调用的函数
    return function() {
        if(!timer) {
            
        //创建延时执行函数
            timer = later();
            //如果是立即执行，调用函数
            //否则 缓存上下文和参数
            if(immediate) {
                fn.apply(this,arguments);
            }else {
                context = this;
                args = {...arguments}
            }
        }else {
            //已有延迟函数，清空上一个，并重新设置
            clearTimeout(timer);
            timer = later();
        }
    }
}

适用场景

• 保存按钮多次点击
• 搜索内容 只执行最后一次

节流

var throttle = function(fn,deplay) {
    let flag = true;
    return function() {
        if(!flag) return ;
        flag = false;
        setTimeout(() => {
            fn.apply(this,arguments);
            flag = true;
        },deplay)
    }
}

每隔一段时间执行一次（固定时间只执行一次）

节流会稀释函数

适用场景

• 拖拽
• 动画
• 缩放