防抖和节流

防抖debounce

• 当事件触发时，相应的请求函数并不会被立即触发，而是会先等待一定的时间
• 当事件频繁触发时，请求函数的触犯会被频繁的推迟
• 只有等待了一段时间也没有事件触发，才执行请求函数

应用场景

• 输入框中频繁的输入内容，搜索或者替换提交信息
• 频繁的点击按钮，触发某个事件
• 监听浏览器滚动事件，完成某些特定操作
• 用户缩放浏览器的 resize 事件

基本实现

//防抖
function debounce(fn,delay){    //fn 需要防抖的函数， delay,防抖的时间期限值
    let timer = null;  //借助闭包
    return function(){
        if(timer){
            clearTimeout(timer)  //进入该分支语句，说明当前正在一个计时的过程中，并且又触发了相同事件。所以要取消当前计时，重新开始计时
        }
        else{
            timer = setTimeout(fn,delay);  //进入该分支说明当前并没有计时，开始计时。
        }
    }
}

节流 throttle

• 当事件频繁触发时，相应的请求函数在规定的执行周期内只触发一次
• 想再次触发时，那么就只能大于设定的执行周期后才能再次触发

应用场景

• 窗口调整（resize）
• 页面滚动
• dom 元素拖拽
• 抢购疯狂点击

基础实现

// 方法一：
function throttle(fn,delay){
    let valid = true
    return function(){
        if(!valid){
            return false;  //休息时间内，不执行函数
        }
        valid = false;
        setTimeout(() => {
            fn();
            valid = false ;
        },delay)
    }
}

//方法二：
function throttle(fn,delay){
    let pre = 0;
    return function(...arg){
        let current = Date.now();
        if(current - pre >= delay){
            fn.call(this,...args);
            pre = Date.now();
        }
    }
}

总结

• 函数防抖： 当多事件发生时，需要发起多次的请求操作，而防抖就是将多次的请求操作合并为一次请求操作。
• 函数节流： 当事件多次发生时，需要发起多次请求操作，而节流就是讲多次请求操作变为在规定时间间隔内只发生一次请求操作，想要再次发生请求操作，那么要等等下一次时间间隔。
• 防抖原理： 维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置，这样就只有最后一次操作能被触发。
• 节流原理： 通过判断是否到达一定时间来触发函数。