应用场景
- 在表单注册中,我们往往需要注册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看似事件还迟一点