本文探讨了JavaScript中的函数防抖与节流技术，用于优化频繁触发的事件处理，例如搜索请求。防抖确保在指定间隔内用户停止操作后执行回调，而节流则限制单位时间内函数的执行次数。文章通过示例解释了两者的区别，并强调了在前端开发中合理使用这两个技术的重要性。此外，还提到了前端开发的学习资源和热门框架React、Vue的知识点，包括生命周期、钩子函数和虚拟DOM等。
==================================================================
函数防抖(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
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
