Vue中实现防抖搜索功能

// vue 搜索功能使用
// utils.js

export let delay = (function() {
    var timer = 0;
    return function(callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
    };
})();

上面使用方式
watch: {
    desk: function (v, o) {
      if (v) {
        delay(() => {
            this.changeSearch()
        }, 300);
      }
    },
  },


// 下面使用方式看下方
export function _debounce(fn, wait) {
    let time = null;
    return function () {
        let _self = this;
        let _ags = arguments;
        clearTimeout(time)
        time = setTimeout(function () {
            time = null
            fn.apply(_self, _ags)
        }, wait)
    }
}

 

组件中使用

// 第一种方式
watch: {
    desk: _debounce(function (v, o) {
      if (v) {
        console.log('aa')
      }
    },300),
  },

// 第二种方式
created () {
    let self = this;
    this.$watch('desk', _debounce((newValue, oldValue) => {
        console.log(newValue)
        if (newValue) {
            self.changeSearch()
        }
    }, 300))
  },

end