如何将 settimeout 与 vue.js 观察者一起使用？答案

【问题标题】：How to use settimeout with vue.js watchers?如何将 settimeout 与 vue.js 观察者一起使用？
【发布时间】：2019-11-30 00:57:25
【问题描述】：

我的应用程序中有搜索字段的自定义观察程序：

watch: {
  search (query) {
    if(query.length > 2) {
      axios.post(url, query)
        .then(res => {
          console.log(res)
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}

如您所见，在我的情况下，我已经在search var 的everey 更改值上向服务器发送了请求。我厌倦了将代码粘贴到setTimeout 中，但是当用户输入 3 次时，请求也发送了 3 次而不是 1 次。我需要在用户输入时等待，在停止输入后向服务器发送一个请求。

setTimeout(function () { 
    // request code here
}, 3000);

如何在 vue.js 观察者中正确地做到这一点？

【问题讨论】：

标签： javascript vue.js vuejs2 settimeout nuxt.js

【解决方案1】：

您可以在lodash 中使用debounce。它非常适合您的用例。

import _ from lodash

watch: {
    search (query) {
        this.performSearch(query)
    }
},
methods: {
    performSearch: _.debounce(function(query) {
        axios.post(url, query)
        .then(res => {
          console.log(res)
        })
        .catch(error => {
          console.log(error)
        })
    }, 200)
}

如果你想在没有lodash库的情况下实现它，你可以试试

data() {
    return {
        timeoutQuery: null
    }
},
watch: {
    search (query) {
        if (this.timeoutQuery) { clearTimeout(this.timeoutQuery) }
        this.timeoutQuery = setTimeout(this.performSearch(query), 300)
    }
},
methods: {
    performSearch(query) {
        axios.post(url, query)
        .then(res => {
          console.log(res)
        })
        .catch(error => {
          console.log(error)
        })
    }
}

【讨论】：

带有 lodash 的示例可以完美地工作，但没有 lodash 的示例无法正常工作。感谢@ittus的回答

【解决方案2】：

您应该使用任何标志来指示您的请求是否忙：

    data () {
        return {
          isRequestBusy: false
        }
      },
    watch: {
      search (query) {
        if(query.length > 2 && !this.isRequestBusy) {
            this.isRequestBusy = true
            axios.post(url, query)
              .then(res => {
                console.log(res)
              })
              .catch(error => {
                console.log(error)
              })
              .finally(() => {
                this.isRequestBusy = false
              })
          }
        }
      }

【讨论】：

【解决方案3】：

您可以使用箭头函数并将代码放入其中。

data() {
  return {
    query: "",
    queryTimeout: null
  };
},
watch: {
  query(newValue, oldValue) {
    console.log(newValue, oldValue);
    const timer = 500;  // In miliseconds
    if (this.queryTimeout) {
      clearTimeout(this.queryTimeout);
    }
    setTimeout(() => {
      this.fetchData(newValue)
    }, timer);
  }
},
methods: {
  fetchData(query = null) {
    console.log(query);
    // Put your logic code here
  }
}

有关解决此问题的更多方法，请查看此链接。 https://stackoverflow.com/a/38431406/4494207

【讨论】：