防抖、节流的区别

防抖和节流都是防止短时间内高频繁调用同一接口的方法。

防抖： 设置延迟器，短时间高频率触发只有最后一次触发成功。(输入框搜索，输入完内容两秒后请求搜索);
节流： 设置状态锁，短时间高频率触发只有第一次触发成功。(获取验证码);

防抖应用场景

• scroll事件滚动
• 浏览器窗口缩放resize事件
• 搜索框输入查询
• 表单验证
• 按钮的提交事件

function debounce(fn,delay = 1000){
    let time = null;
    return function (){
        let that = this;
        if(time){
            clearTimeout(time)
        }
        time = setTimeout(()=>{
            fn.apply(that,arguments);
        },delay)
    }
}
function logger(e){
    console.log(e)
}
btn.addEventListener('click',debounce(logger,1000))

节流应用场景

• DOM元素拖拽功能
• 计算鼠标移动距离
• 监听scroll滚动事件
• 搜索、提交等按钮功能

function throttle(fn,delay = 1000){
    let time = null;
    return function(){
        let that = this;
        if(!time){
            time = setTimeout(()=>{
                fn.apply(that,arguments);
                time = null;
            },delay)
        }
    }
}

代码：

 // 防抖
function debounce(fn, delay) {
    let timer = null;
    return function () {
        let context = this;
        let args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(context, args);
        }, delay);
    }
}
debounce(function () {
    console.log('防抖成功');
}, 1000)();

// 节流
function throttle(fn, delay) {
    let valid = true;
    return function () {
        if (!valid) {
            // 休息时间 暂不接客
            return false;
        }
        // 工作时间，执行函数并且在间隔期内把状态位设为无效
        valid = false;
        setTimeout(() => {
            fn();
            valid = true;
        }, delay);
    }
}
throttle(function () {
    console.log('节流成功');
}, 1000)();