去抖功能調用延遲，但在等待計時器結束時全部執行

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

這是我的console.log：

Answer 1

你正在創建一個扼殺函數，每次你​​（你應該使用input而不是順便）。你可以這樣做，而不是我想......

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