如何使用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()返回原来的功能,但用去抖逻辑包裹.因此,您将其缓存在变量中,并使用所需的参数(page)执行该函数.因此,使用debounce的语法正确的方法更像是这样的:

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它本身并没有被去除,所以所有这些代码都会创建许多很多的去抖函数,一旦500ms开始就会全部触发.这不是一个好主意.

现在我的问题是:你如何调用这个函数？来自v-on:点击？然后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
    }
  }
})