==================================================================
函数防抖(debounce)
在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
<body> <input type="text" id='unDebounce'> </body> </html> <script> //模拟一段ajax请求 function ajax(content){ console.log('ajax request ' + content) }; letinputa = document.getElementById('unDebounce'); function fn(e){ ajax(e.target.value) } //防抖函数,处理多次被触发的事件,只执行最后一次 inputa.addEventListener('input', fn) </script>
看一下运行结果:
可以看到,我们只要输入一个字符,就会触发这次ajax请求。不仅从资源上来说是很浪费的行为,而且实际应用中,用户也是输出完整的字符后,才会请求。下面我们优化一下:
<body> <input type="text" id='unDebounce'> </body> </html> <script> //防抖函数 function _debounce(fn, del