Entprellte Funktionen werden verzögert, aber alle ausgeführt, wenn die Wartezeit abgelaufen ist

Question

Ich verwende debounce, um ein Feld "Suche bei der Eingabe" zu implementieren.

Ich lese https://css-tricks.com/debouncing-throttling-explained-examples/ und von dem, was ich verstehen kann die Funktion sollte nur eine begrenzte Anzahl von Zeiten aufgerufen werden.

In meinem Fall sind die Funktionsaufrufe verzögert, aber auf einmal ausgeführt, wenn die Wartezeit-Timer endet:

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 
    }) 
    }, 

die HTML (es ist Vue.JS)

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

Das ist mein console.log:

Answer 1

Sie erstellen eine gedrosselte Funktion jedes Mal, wenn Sie keydown (Sie sollten wahrscheinlich stattdessen input verwenden). Sie können dies tun, anstatt denke ich ...

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