超级会员免费看
本文介绍了DOM事件处理中的防抖、节流和代理技术。防抖用于限制函数的频繁执行，例如在搜索框输入时避免过多的请求。节流则确保在一定时间内只调用一次函数，适用于滚动事件处理。事件代理通过在父元素上绑定事件，高效处理大量子元素的事件，减少了内存和执行时间。文章还探讨了事件触发的三个阶段和注意事项，如DOM0和DOM2事件监听的区别。
一、防抖
在一段时间内能够多次触发并且在最后一次触发才是能够得到完整结果的事件可以使用防抖来防止事件处理函数的多次执行以提升体验和性能。
比如：有一个搜索输入框，为了提升用户体验，希望在用户输入后可以立即展现搜索结果，而不是每次输入完后还要点击搜索按钮。一种实现方式应该很容易想到，那就是绑定 input 元素的input事件，然后在监听函数中发送 AJAX 请求。
这样的实现很容易造成性能问题。比如一个词需要输入四次那么就会发送四次ajax请求。其实只有最后一次才是用户想要输入的完整内容，前面三次的查询都会被浪费掉，浪费了网络带宽和服务器资源。这个时候就可以考虑使用防抖了。
简单的防抖可以使用settimeout实现。在实现防抖时如何实现：1、参数和返回值如何传递？，2、防抖化之后的函数是否可以立即执行？，3、防抖化的函数是否可以手动取消？。这是更复杂的防抖需求了，为了实现这些需求，写出了如下代码。
首先将原函数作为参数传入 debounce() 函数中，同时指定延迟等待时间，返回一个新的函数，这个函数包含 cancel 属性，用来取消原函数执行。flus
订阅专栏 解锁全文
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
