节流与防抖

介绍

• 节流：在规定时间，函数只被调用一次，且是最先被触发调用的那次。
• 防抖：当一个事件被触发后准备执行函数前会等待一定的时间，如果没有再次被触发就执行，如果再次被触发，那上一次的触发作废，从新触发的时间开始等待，直到最终执行。

使用场景

• 节流：滚动加载更多、DOM元素拖拽、搜索框联想搜索、高频点击等。
• 防抖：搜索框输入后自动搜索、手机号或者邮箱等验证输入检测、表单提交、按钮的点击或者提交、窗口大小resize后重新渲染等。

代码示例

• 节流

function throttle(callback, wait) {
    // 定义开始时间
    let start = 0;
    // 返回结果是一个函数
    return function(e) {
        // 获取当前的时间戳
        let now = Date.now();
        // 判断
        if(now - start >= wait) {
            // 修改this指向，执行回调函数
            callback.call(this, e);
            // 修改开始时间
            start = now;
        }
    }
}

document.onscroll = throttle(function() {
    console.log('事件被触发了' + Date.now());
}, 1000);

• 防抖

function debounce(callback, time) {
    let timeId = null;
    // 返回一个函数
    return function(e) {
        // 判断
        if(timeId !== null) {
            // 清空定时器
            clearTimeout(timeId);
        }
        // 启动定时器
        timeId = setTimeout(()=>{
            // 修改this指向并执行回调
            callback.call(this, e);
            // 重置定时器变量
            timeId = null;
        }, time)
    }
}
document.getElementById('btn').onclick = debounce(function(){
    console.log('按钮被点击了' + Date.now());
}, 1000);