防抖(debounce) - Githubissues

ArthurWangCN commented 2 years ago

在前端开发中会遇到一些频繁的事件触发，比如：resize、scroll、mousedown、mousemove、keyup、keydown。频繁触发很容易造成一些性能问题，目前解决这种性能问题最常用的就是防抖和节流。

ArthurWangCN commented 2 years ago

防抖(debounce)，在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

防抖的原理就是：你尽管触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件才执行。

ArthurWangCN commented 2 years ago

自己实现防抖：

function debounce(func, wait, immediate) {

    var timeout, result;

    var debounced = function () {
        var context = this;
        var args = arguments;

        if (timeout) clearTimeout(timeout);
        if (immediate) {
            // 如果已经执行过，不再执行
            var callNow = !timeout;
            timeout = setTimeout(function(){
                timeout = null;
            }, wait)
            if (callNow) result = func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
        return result;
    };

    debounced.cancel = function() {
        clearTimeout(timeout);
        timeout = null;
    };

    return debounced;
}

ArthurWangCN commented 2 years ago

实现防抖思路：

举个例子

var count = 1;
var container = document.getElementById('container');
function getUserAction() {
    container.innerHTML = count++;
};
container.onmousemove = getUserAction;

从左边滑到右边就触发了 165 次 getUserAction 函数！

第一版：

function debounce(func, wait) {
    var timeout;
    return function () {
        clearTimeout(timeout)
        timeout = setTimeout(func, wait);
    }
}

this 和 event 对象

如果我们在 getUserAction 函数中 console.log(this)，在不使用 debounce 函数的时候，this 的值为：<div id="container"></div>；但是如果使用我们的 debounce 函数，this 就会指向 Window 对象。
如果我们不使用 debouce 函数，事件对象会打印 MouseEvent 对象；在我们实现的 debounce 函数中，却只会打印 undefined。

所以我们需要将 this 指向正确的对象：

// 第二版
function debounce(func, wait) {
    var timeout;

    return function () {
        var context = this;
        var args = arguments;

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}

立刻执行

我不希望非要等到事件停止触发后才执行，我希望立刻执行函数，然后等到停止触发 n 秒后，才可以重新触发执行。所以加个 immediate 参数判断是否是立刻执行。

ArthurWangCN / notepad

防抖(debounce) #3

第一版：

this 和 event 对象

立刻执行