如何在vue.js watchers中使用settimeout？

xxhby3vn 于 2023-05-23 发布在 Vue.js

关注(0)|答案(3)|浏览(238)

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

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

在这里，正如你所看到的，我已经向服务器发送了请求，在我的情况下，每个search var的值都发生了变化。我累了粘贴我的代码内setTimeout，但当用户键入3次，然后请求也发送3次，而不是一次。我需要等待当用户正在键入和停止键入后发送一个请求到服务器。

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

如何在vue.js watchers中正确执行？

vue.js

来源：https://stackoverflow.com/questions/57139419/how-to-use-settimeout-with-vue-js-watchers

3条答案

按热度按时间

ldfqzlk81#

您可以在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)
        })
    }
}

赞(0）回复(0）举报 2023-05-23

wecizke32#

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

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

赞(0）回复(0）举报 2023-05-23

bxfogqkk3#

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

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

赞(0）回复(0）举报 2023-05-23

我来回答

如何在vue.js watchers中使用settimeout？

3条答案

相关问题

热门标签

最新问答