基于防抖和节流的性能优化

什么是防抖和节流？

防抖

防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

举个例子：通过关键字进行搜索时，如果输入三个字母，则会请求三次接口。有没有什么方法可以在输入结束后几百毫秒再发起一次请求呢？防抖！

节流

节流就是指连续触发事件，但是在一段时间中只执行一次函数。

举个例子：一个按钮被多次连续点击（射击游戏开枪的时候），但是无论点击的多快，一段时间内也只发射一发子弹。有没有什么方法可以实现呢？节流！

简单实现

防抖

var box = document.getElementById('box');
box.onmousemove = debounce(mouseMove, 1000);

function mouseMove(event) {
    console.log(event.clientX)
}

function debounce(fn, wait) {
    let timer = null;
    return function () {
        var args = arguments;
        timer && clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, args);
        }, wait)
    }
}

节流

var box = document.getElementById('box');
box.onmousemove = throttle(mouseMove, 1000);

function mouseMove(event) {
    console.log(event.clientX)
}

function throttle(fn, wait) {
    var last = 0;
    return function () {
        var args = arguments;
        var now = Date.now();
        if (now - last > wait) {
            fn.apply(this, args);
            last = now;
        }
    }
}