如何使用 VueJS 去除 AJAX 调用的抖动？

Question

我正在尝试去抖一个 AJAX 调用只发送一次，但不幸的是，它告诉我我传递给它的不是一个函数。这是我的代码：

getItems: function(page){
  this.page = page;
  console.log(typeof(this.getBackendItems));
  _.debounce(this.getBackendItems(page), 500);
},
getBackendItems: function(page){
  this.$http.get("{{url('api/user/items')}}", {page : page}).success(function(response){
      this.items = response.data;
      this.last_page = response.last_page;
  });
},

Console.log 说 getBackendItems 是一个函数，但仍然抛出一个错误，表示没有函数被传递给 _.debounce() 调用。

Answer 1

这有几个问题：

正确传递函数

当你试图像这样传递函数时：this.getBackendItems(page)你是运行它，所以_.debounce接收的不是函数，而是函数的结果，这在本例中，是一个 Promise 对象。

this.getBackendItems传递函数
this.getBackendItems(page)运行函数，并传递结果

但是，您如何告诉它使用哪些参数？

正确调用去抖函数

好吧，_.debounce() returns 您的原始函数，但包含了去抖动逻辑。因此，您将其缓存在一个变量中，并使用您想要的参数 (page) 执行该函数。所以语法上正确的去抖动方法应该是这样的：

getItems: function(page){
  this.page = page;
  console.log(typeof(this.getBackendItems));
  var debouncedFunction = _.debounce(this.getBackendItems.bind(this), 500); // properly bind the function so "this" is the vue component.
  debouncedFunction(page)
},

去抖动正确的函数

但是，那也行不通，因为 getItems 本身没有去抖动，所以这段代码要做的就是创建很多很多去抖动函数，这一旦 500 毫秒开始，就会全部触发。这不是个好主意。

现在我的问题是：如何调用这个函数？从 v-on:click?然后 Vue 为您提供帮助：

使用 Vue 的去抖过滤器

<a v-on:click="getItems(page) | debounce 500">Some Link</a>

使用该过滤器，您根本不需要使用 _.debounce。

如果您以其他方式调用此函数，请告诉我。

编辑：根据评论反馈更新：

计算去抖次数时的去抖函数

<a href="#"
  @click.prevent="getItems(page) | debounce 500" 
  @click="pageBuffer = pageBuffer +1">
  Click Me
</a>

JS:

var App = new Vue({
  el: '#app',
  data() {
    return {
            page: 1,
      pageBuffer: 0
    }
  },
  methods: {
    getItems: function(page) {
      this.getBackendItems(page + this.pageBuffer)
      this.pageBuffer = 0
    }
  }
})

Answer 2

这是适合我的解决方案：

<template>
  <div>
    <input type="text" v-model="term">
  </div>
</template>

<script>
export default {
  data() {
    return {
      term: ''
    }
  },

  watch: {
    term(value) {
      this.search(value)
    }
  },

  mounted() {
    this.search = _.debounce(this.getBackendItems.bind(this), 1000)
  },

  methods: {
    getBackendItems(value) {
      console.log(value)
      // ...
    }
  }
}
</script>

如何使用 VueJS 去除 AJAX 调用的抖动？

How to debounce an AJAX call with VueJS?

lodash

vue.js

正确传递函数

正确调用去抖函数

去抖动正确的函数

使用 Vue 的去抖过滤器

计算去抖次数时的去抖函数