【核心基础知识】3个场景的DOM事件处理

一、防抖

在一段时间内能够多次触发并且在最后一次触发才是能够得到完整结果的事件可以使用防抖来防止事件处理函数的多次执行以提升体验和性能。

比如：有一个搜索输入框，为了提升用户体验，希望在用户输入后可以立即展现搜索结果，而不是每次输入完后还要点击搜索按钮。一种实现方式应该很容易想到，那就是绑定 input 元素的input事件，然后在监听函数中发送 AJAX 请求。

这样的实现很容易造成性能问题。比如一个词需要输入四次那么就会发送四次ajax请求。其实只有最后一次才是用户想要输入的完整内容，前面三次的查询都会被浪费掉，浪费了网络带宽和服务器资源。这个时候就可以考虑使用防抖了。

简单的防抖可以使用settimeout实现。在实现防抖时如何实现：1、参数和返回值如何传递？，2、防抖化之后的函数是否可以立即执行？，3、防抖化的函数是否可以手动取消？。这是更复杂的防抖需求了，为了实现这些需求，写出了如下代码。

首先将原函数作为参数传入 debounce() 函数中，同时指定延迟等待时间，返回一个新的函数，这个函数包含 cancel 属性，用来取消原函数执行。flush 属性用来立即调用原函数，同时将原函数的执行结果以 Promise 的形式返回。

const debounce = (func, wait = 0) => {
      let timeout = null
      let lastArgs = null

      function debounced(...args) {
         lastArgs = args

         if (timeout) {
            clearTimeout(timeout)
            timeout = null
         }