防抖与节流的理解和应用案例

标题什么是防抖：

防抖策略是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。
就像回城被打断，想重新回城，还要重新计时

防抖案例用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源；

<!-- 输入框 -->
<input type="text"><span></span>

var timer = null;
// 当输入框触发键盘事件的时候，获取输入框的值。提交给接口，验证用户名是否可用
document.querySelector('input').onkeyup = function () {
    if (timer !== null) {
        clearTimeout(timer);
    };
    timer = setTimeout( () => {
        var val = this.value;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/getName?username=' + val)
        xhr.onload = function () {
            var res = JSOn.parse(this.response);
            document.querySelector('span').innerText = res.msg;
        };
        xhr.send(null)
    }, 500)
}

什么是节流：

节流策略（throttle），顾名思义，可以减少一段时间内事件的触发频率。
就像发射子弹的射速，不管你再怎么按，射速都不会增加

节流案例：优化跟随鼠标移动的小天使
效果：加入节流函数之后，随着 mousemove 时间的出发而出发，而是有一定的时间（20ms）的限制，节约了性能，当然这只是节流案例的一个小应用

<img src="./angle.jpg" alt="">

var timer = null;
document.onmousemove = function (e) {
    if (timer !== null) {
        // 说明下面有一个定时器
        return;
    };
    timer = setTimerout(() => {
        document.querySelector('img').style.left = e.pageX + 'px';
        document.querySelector('img').style.top = e.pageX + 'px';
        // 清除定时器
        timer = null
    }, 20) // 时间太长会造成延时严重，用户体验差
}