函数防抖

应用场景

• 在表单注册中，我们往往需要注册input事件实时监听客户输入的值数据库中是否存在，存在就友好的提示客户。但是不可能每次客户输入就触发，那么出现了下面的应用

基本原理

• 利用闭包环境，外部调用的是函数内容的方法，但是timer变量一直都是存在的，控制着最后的回调函数执行时间，每次执行的函数的时间内超过500毫秒就不执行

具体实现

<script>
    let btn=document.getElementsByTagName('button')[0]
    btn.onclick=debounce(function(){console.log(1) },500);
    function debounce(callback,time){
        let timer;
        return function(){
            window.clearTimeout(timer);
            timer=window.setTimeout(function(){
                callback()
            },time);
        }
    }
</script>

 注意事项

• 尽量避免使用函数防抖，特别是多事件交叉的情况，例如input表单注册了input事件，也注册了blur事件，input事件是防抖的，事件间隔是500毫秒，那么当我去触发blur事件，input事件很有可能还没结束自己的回调函数，这是非常不合理的
• 即使你将在blur事件中加定时器600毫秒触发也不管用，任务队列中的回调函数谁先进主线程，这个说不准，即使blur看似事件还迟一点