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

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

clearTimeout(debounceTimer);

Bricht ausstehende Timer vorheriger Tastenanschläge ab, um verfrühte Updates zu verhindern.

debounceTimer = setTimeout(() => { ... }, 300);

Plant die reaktive Aktualisierung 300 Millisekunden nach dem letzten Eingabeereignis ein.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Verzögern von Sucheingaben mit SetTimeout in Vue

Verwandt