JS中关于函数防抖和节流之用法

1.函数防抖

事件触发N秒后函数只执行一次，在N秒内触发则重新计算时间

1.1 应用场景

• 搜索框实时搜索（keyup）
• 鼠标拖拽、移动（mousemove）
• 输入框实时验证(手机号、邮箱等等)

1.2 函数防抖 — 代码实现

function debounce(fn,delay){
    let timeout = null;//创建一个标记，用来存放定时器的返回值
    return function(){
        let this_ = this;
        clearTimeout(timeout);//当用户输入时把前一次的 timeout 清除掉
        timeout = setTimeout(()=>{
            fn.apply(this_,arguments);
        },delay)
    }
}

1.3 测试

<input type="text" style="width: 200px;height: 30px;">
<script>
function b(){//测试
    console.log(this.value);
}
let input1 = document.getElementsByTagName('input')[0];//输入框停止输入后500毫秒打印输入内容
input1.oninput = debounce(b,500);
</script>

2.函数节流

指定的时间间隔内只执行一次函数

2.1 应用场景

• 页面滚动加载(scroll)
• 窗口大小调整(resize)
• 高频点击(mousedowm、抢购等等)

2.2 函数节流 — 代码实现

2.2.1 时间戳版本 => 使用闭包返回一个函数使用函数外部的变量previous

function throttle(fn,wait){
    let previous = 0;
    return function(){
        let now = Date.now();
        let that = this;
        if(now - previous > wait){
            console.log(previous,now)
            fn.apply(that,arguments);
            previous = now;
        }
    }
}

2.2.2 定时器版本

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

2.3 测试

// 窗口调整(resize)设置1000毫秒执行一次hander()
function hander(){
    console.log("你好，节流");
}
window.addEventListener("resize",throttle(hander,1000));