防抖函数通用

最新推荐文章于 2024-09-03 21:44:01 发布

Whales_w

最新推荐文章于 2024-09-03 21:44:01 发布

阅读量137

点赞数

文章标签：前端 javascript 开发语言 vue.js html5

本文链接：https://blog.csdn.net/Whales_w/article/details/132562844

版权

本文介绍了JavaScript中的防抖(debounce)函数，一种常用的技术，用于优化在用户频繁触发事件时的性能，如搜索框输入。通过设置延迟时间，确保在用户停止连续操作后才执行特定任务。

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

<input type="text" v-model="searchQuery" @input="clickDebounce" />

              clickDebounce(){
                let namex = '学校';
                if (!this.debouncedSearch) {
                    this.debouncedSearch = this.debounce((name) => {
                        console.log(name)
                        console.log('Searching for:', this.searchQuery);
                        // 实际的搜索逻辑在这里执行，
                    }, 500); // 设置节流时间为 500 毫秒
                }
                this.debouncedSearch(namex);
                }
            // 防抖函数
            debounce(func,time = 1000){
                let timer = null;
                return function (){
                    clearTimeout(timer);
                    timer = setTimeout(() => {
                        func.apply(this,arguments)
                    },time)
                }
            }