lodash - 如何使用 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 本身没有去抖动，所以这段代码要做的就是创建很多很多去抖动函数，这将全部在 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
    }
  }
})