去抖函数调用延迟但在等待计时器结束时全部执行

Question

我正在使用debounce 来实现“键入时搜索”字段。

我正在阅读https://css-tricks.com/debouncing-throttling-explained-examples/，据我所知，该函数只能被调用有限的次数。

在我的例子中，函数调用被延迟了，但是一旦等待计时器结束就立即执行：

methods: {
  searchOnType: function (currentPage, searchString) {
    console.log(`Searching ${searchString}`)
    var debounced = throttle(this.getMovies, 4000, {leading: false, trailing: true})
    debounced('movies.json', currentPage, searchString)
  },
  getMovies: function (url, page, query) {
    console.log(query)
    this.loading = true
    resourceService.getMovies(url, page, query).then((result) => {
      this.items = result.movies
      this.totalMovies = result.total
      this.loading = false
    })
  },

HTML（它是 Vue.JS）

  <input 
    type="text" 
    v-model="searchString" 
    class="form-control input-lg" 
    placeholder="search movie" 
    @keydown="searchOnType(currentPage, searchString)"
  >

这是我的控制台日志：

Answer 1

每次keydown 时，您都会创建一个限制函数（顺便说一下，您可能应该使用input）。我认为你可以这样做......

methods: {
  searchOnType: throttle((currentPage, searchString) => {
    this.getMovies('movies.json', currentPage, searchString)
  }, 1000, {leading: false, trailing: true})
}