vue的watch监听防抖函数

需求就是输入框进行实时搜索 但是肯定不能说输入一个字符就进行一次搜索 接口请求多了容易崩掉

所以防抖函数就起作用了 直接上代码把

methods里面设置

debounce: function(fn, wait) {
      if (this.fun !== null) {
        clearTimeout(this.fun);
      }
      this.fun = setTimeout(fn, wait);
    },
    async changeStr() {
      const res = await this.$http.post("/Create/Work/SelectUrl", {
        url: this.ruleForm.urls[0].gdurl
      });
      this.$notify({
        title: "第一组网址",
        message: `该网址power为:${res.data["sum(power)"]},标题为:${
          res.data.urlname
        }`,
        duration: 0
      });
    },

watch: {
    "ruleForm.urls.0.gdurl": function(val) {
      if (typeof val === "string") {
        if (val.trim().length !== 0) {
          this.debounce(this.changeStr, 1000);
        }
      }
    },