实现防抖操作的方法

最新推荐文章于 2024-08-08 15:58:10 发布

打工人打工混

最新推荐文章于 2024-08-08 15:58:10 发布

阅读量850

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_45633169/article/details/109109781

版权

本文探讨了两种实现前端防抖(debounce)技术的方法：一是通过定义标识符`isSending`来判断并取消请求，二是利用`clearTimeout`和`setTimeout`结合，确保在用户输入停止后才执行搜索操作。这两种技术可以有效防止频繁触发的事件导致的性能问题，提高用户体验。

摘要由CSDN通过智能技术生成

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()函数，得到结果