什么是防抖和节流？有什么区别？如何实现？

1. 概念解释

• 防抖：某一高频事件不断被触发时，仅在最后一次真正执行事件处理代码。
• 节流：某一高频事件被触发时，确保在每一个特定的时间段内被执行一次。
• 相似点：都是为应对事件持续频繁发生，造成前端性能下降或对后端服务造成的压力。
• 区别：节流会不断的触发，而防抖仅在最后一次触发。防抖适用于，如搜索输入框提示，仅在输入停止后进行一次提示更新，以减少后台压力。节流适用于，如窗体以拖动的方式调整大小，在每次特定的时间片结束后触发一次窗体大小调整。

2. 实现方式

2.1 防抖

• 计时器实现方式

var timeout;

function debounce(func, wait) {

    return function() {
        var args = arguments;
        var content = this;
        clearTimeout(timeout);
        timeout = setTimeout(func.bind(content, args), wait);
        console.log(args.callee);
    }
}

function action(e) {
    console.log('action is active.')
    console.log(e);
}

for (i = 0; i < 10; i++) {
    debounce(action, 1000)();
}

结果：

C:\BaiduyunBackup\FrountStudy>node a.js
[Function (anonymous)]
[Function (anonymous)]
[Function (anonymous)]
[Function (anonymous)]
[Function (anonymous)]
[Function (anonymous)]
[Function (anonymous)]
[Function (anonymous)]
[Function (anonymous)]
[Function (anonymous)]
action is active.
[Arguments] {}

2.2 节流

• 计时器实现

var timeout;

function debounce(func, wait) {
    return function() {
        var args = arguments;
        var content = this;
        timeout = setTimeout(
            function() {
                func.apply(content, args);
                clearTimeout(timeout)
            }, wait);
        console.log(args.callee);
    }
}

function action(e) {
    console.log('action is active.')
    console.log(e);
}

function sleep(time) {
    return new Promise((resolve) => setTimeout(resolve, time));
}

(async function() {
    for (i = 0; i < 10; i++) {
        await sleep(500);
        debounce(action, 1000)();
    }
})();

执行结果：

C:\BaiduyunBackup\FrountStudy>node a.js
[Function (anonymous)]
[Function (anonymous)]
action is active.
undefined
[Function (anonymous)]
[Function (anonymous)]
action is active.
undefined
[Function (anonymous)]
[Function (anonymous)]
action is active.
undefined
[Function (anonymous)]
[Function (anonymous)]
action is active.
undefined
[Function (anonymous)]
[Function (anonymous)]
action is active.
undefined

• 时间戳方式

var oldTime = 0;

function debounce(func, wait) {
    return function() {
        var args = arguments;
        var newTime = +new Date();
        console.log(newTime);
        if (newTime - oldTime > wait) {
            func.apply(this, arguments);
            oldTime = newTime;
        }
        console.log(args.callee);
    }
}

function action(e) {
    console.log('action is active.')
    console.log(e);
}

function sleep(time) {
    return new Promise((resolve) => setTimeout(resolve, time));
}

(async function() {
    for (i = 0; i < 10; i++) {
        await sleep(500);
        debounce(action, 1000)();
    }
})();

执行结果：

C:\BaiduyunBackup\FrountStudy>node a.js
1622887204265
action is active.
undefined
[Function (anonymous)]
1622887204786
[Function (anonymous)]
1622887205296
action is active.
undefined
[Function (anonymous)]
1622887205807
[Function (anonymous)]
1622887206319
action is active.
undefined
[Function (anonymous)]
1622887206837
[Function (anonymous)]
1622887207349
action is active.
undefined
[Function (anonymous)]
1622887207865
[Function (anonymous)]
1622887208368
action is active.
undefined
[Function (anonymous)]
1622887208879
[Function (anonymous)]