debounce的具体实践

最新推荐文章于 2025-11-13 17:00:57 发布

原创最新推荐文章于 2025-11-13 17:00:57 发布 · 765 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

Vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用debounce技术优化搜索框功能，以避免频繁查询导致的性能问题。通过监听输入数据变化并在一定时间间隔后执行搜索，实现了输入防抖。文中提供了两种实现方法，一种是直接在`$watch`中调用debounce，另一种是通过额外的函数间接触发。作者推荐第一种方法，认为其思路更清晰，但强调在`watch`中直接使用debounce可能造成困扰。文章还对比了两种方法中`this`指向的区别，并提醒新手注意这一点。

Vue中的debounce应用

背景：优化搜索框的功能，在输入过程中，可以实时动态进行搜索，但是为了提高搜索效率，频繁进行查询，需要进行防抖

解决办法：在输入过程中，在一定时间内没有输入，再进行查找，采用debounce；

因此在编程时，需要注意两点：

第一：监听输入数据的变化，触发搜索（监听一般想到的是watch）

第二：进行防抖，并不是所有的输入，都需要进行搜索，采用定时来实现

具体实践：

方法1:

监听数据变化，执行debounce，不直接使用watch：{}是因为debounce不能直接在watch中使用，应该放在created中

//监听input数据，当数据变化的时候，触发debounce
this.$watch('input',this.debounce(()=>{
      this.search()//具体需要执行的函数
},3000))

具体debounce函数实现

debounce(fn, delay){
      var timer = null;
      return function() {
        var self = this, 
        args = arguments;  
        clearTimeout(timer);
        timer = setTimeout(function() {
          fn.apply(self, args)
        }, delay);
      }
    },

如果想直接使用watch()来监听，可以参考方法2

方法2:

监听到变化后，触发一个emitDebounce函数，这个函数不是debounce，而是通过这个函数再去触发debounce

watch:{
    input(){
      this.emitDebounce({vm:this})
    }
  },

给emitDebounce绑定debounce

editDebounce: debounce(({ vm, val, verifyEmail }) => {
	     console.log('codeing')
	    }, 300

debounce函数实现

const debounce = (func, wait) => {
  let timeout = '';
  return (v) => {
    if (timeout) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(() => {
      func(v);
    }, wait);
  }

个人更推荐方法1 ，思路更为清晰，且this指向明确，但在第一次使用时，会直接将debounce写在watch中，然后进入无止尽的调试。。。

方法2中debounce中的this不指向vue实例，需要将this作为一个参数传参，新手容易迷糊