JavaScript防抖基本思想及代码解析

当我们在input标签的input事件中请求后端接口，一般input事件是连续触发的，假设我们输入了12，就会发起两次接口请求，请求参数分别是1和12，可是我们想给用户呈现的只有参数为12时返回的数据，剩下的请求都是浪费的。
比浪费网络资源更要命的是，如果参数为1的接口返回数据的时间晚于12的接口，那么我们最终呈现的就是参数为1返回的数据，即呈现出错误的信息。

针对此类快速连续触发且不可控的高频触发问题，给出防抖(debounce)的解决方案。

防抖的目的

防抖的目的都是为了减少不必要的计算、不浪费资源，只在适合的时候进行触发计算

基本思想

当事件被触发时，设定一个周期延迟，若再次被触发且在设定周期之内，则重新设定周期时间（不执行上次触发运算），直到周期结束，才会执行动作。
这是防抖的基本思想，在后期又扩展了前缘防抖，即执行动作在前，然后设定周期时间。

特点

1. 当事件快速不断触发（触发间隔小于周期时间）时，动作只执行一次
2. 一般防抖是在周期结束后执行（前缘防抖是在周期开始时执行）
3. 当触发有间断，且间断大于我们设定的时间间隔时，动作就会有多次执行

基础代码解析

<div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;">
</div>
//添加div设置一些简单的样式
<script>
//获取div元素，为div添加鼠标移动事件函数，每次触发函数，div中的数字就+1
let num = 1;
let content = document.getElementById('content');
function count() {
    content.innerHTML = num++;
};
//不添加防抖，每次鼠标移动会快速触发多次事件
content.onmousemove = count;

//现在添加防抖，传入两个参数，第一个参数为要触发的事件，第二个参数为设定的周期时间（周期时间默认为1000毫秒）
function debounce(func, wait = 1000) {
	//定义一个空变量，用来保存定时器
    let timeout;
    //返回一个函数（闭包），可以传入参数，由arguments接收
    return function () {
    	//定义变量保存this（执行动作时修改this指向）
        let context = this;
        //接收arguments参数
        let args = arguments;
        //判断定时器是否未执行完毕，若未执行完毕，则清除上次的定时器（不触发事件）
        if (timeout) clearTimeout(timeout);
        //定义新的定时器，设置/重置周期时间
        timeout = setTimeout(() => {
        	//定时器结束时清除定时器并执行动作
            timeout = null
            func.apply(context, args)
        }, wait);
    }
}
//调用防抖
//count为要触发的事件，500为设定的周期时间，单位毫秒
content.onmousemove = debounce(count, 500);
</script>