JavaScript防抖

最新推荐文章于 2025-04-11 00:03:56 发布

大吉大利的卦象

最新推荐文章于 2025-04-11 00:03:56 发布

阅读量405

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_44949068/article/details/122896442

JavaScript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何运用防抖策略来优化用户输入时的搜索请求。通过设置定时器，在最后一次触发事件后延迟执行回调，避免了频繁发送请求，提高了用户体验。在示例中，当点击按钮时，会清除上一次的定时器并启动新的防抖函数，确保只有在用户停止输入一段时间后才真正执行搜索请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

防抖策略：当事件被触发后，延迟n秒再执行回调，如果在这n秒内事件又被触发，则重新计时；

        // 1、定义延时器的ID
        let timer = null;
        // 2、定义防抖函数
        function debounceSeach(kw) {
            timer = setTimeout(() => {
                phone();
            }, 500);
        }

        btn.addEventListener('click', function () {
            // 3、执行之前打断上一次的请求
            clearTimeout(timer);
            ///4、然后再执行本次请求
            debounceSeach();
        })

        function phone() {
            axios({
                method: 'post',
                url: url,
                data: {
                    text: "测试测试测试测试测试测试"
                }
            }).then(res => {
                console.log(res.data);
            })
        }