javascript / beginner
Snippet
Verzögern von Sucheingaben mit SetTimeout in Vue
Debouncing ist ein Performance-Muster, das die Aufrufhäufigkeit einer Funktion drosselt. Indem der vorherige Timer bei jedem Tastenanschlag mit clearTimeout zurückgesetzt und ein neuer setTimeout gestartet wird, aktualisiert sich die Suche erst, wenn der Benutzer 300 Millisekunden lang pausiert.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { ref } from 'vue';export default {setup() {const searchQuery = ref('');let debounceTimer = null;function onSearchInput(event) {const query = event.target.value;clearTimeout(debounceTimer);debounceTimer = setTimeout(() => {searchQuery.value = query;}, 300);}return { searchQuery, onSearchInput };}};
vue
Erklärung
1
clearTimeout(debounceTimer);
Bricht ausstehende Timer vorheriger Tastenanschläge ab, um verfrühte Updates zu verhindern.
2
debounceTimer = setTimeout(() => { ... }, 300);
Plant die reaktive Aktualisierung 300 Millisekunden nach dem letzten Eingabeereignis ein.