复习之防抖与节流

debounce（防抖）的特点是当事件快速连续不断触发时，动作只会执行一次

节流（throttle）函数不管事件触发有多频繁，每隔一个时间周期就会执行一次事件处理程序

 

防抖简单实现

<input name="username" type="text" oninput="checkUsername(this)">
<script>
    var handler;
    function checkUsername(it) {
        clearTimeout(handler);
        handler = setTimeout(() => {
            // TODO
        }, 1000)
    }
</script>

可以仔细分析一下，这几行代码是不是上面的方案一。

如果在1000毫秒内，反复执行checkUsername函数，那么setTimeout就会被反复清除，并且反复设置一个新的1000毫秒的定时任务。直到你执行checkUsername的前后两次间隔超过1000毫秒，定时任务才有机会执行一次。