实现防抖操作的方法

1.添加标识符

 <script>
        const btns = document.querySelectorAll('button')
        let x = null
        //定义标识符
        let isSending = false
        btns[0].onclick = function () {
            // 判断标识符，abort方法取消请求
            if (isSending) x.abort()
            x = new XMLHttpRequest()
            // 修改标识变量的值
            isSending = true
            x.open('GET', 'http://127.0.0.1:8000/delay')
            x.send()
            x.onreadystatechange = function () {
                if (x.readyState === 4) {
                    //请求完成之后再次修改标识符的值
                    isSending = false
                }
            }
        }   
    </script>

判断标识符 isSending的值 来选择取消请求和完成请求来实现防抖

2.利用 clearTimeout，setTimeout方法实现防抖操作

 handleInput(e) {
 clearTimeout(this.data.TimeId);
      this.data.TimeId = setTimeout(() => {
        this.getSerachVlue(value);
      }, 1000);
}

handleInput()为搜索框改变的监控事件，即用户输入每一个字符都会触发的事件
setTimeout()函数为1S后执行内部的获取搜索数据的方法即getSerachVlue()，一旦用户在1S之内再次触发 handleInput()函数，此时的 clearTimeout方法就会删除前面已经生成的TimeId,此时再运行下面的setTimeout()，再生成一个新的TimeId,以此循环，直到用户停止输入，即时间=1s时就会调用getSerachVlue()函数，得到结果