javascript - 如何在vue.js观察者中使用settimeout？

我的应用程序中有用于搜索字段的自定义监视程序：

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次，而不是发送一次。我需要等待用户输入内容，停止输入后再向服务器发送一个请求。

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

我如何在vue.js观察器中正确执行此操作？

最佳答案

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

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)
        })
    }
}