Snippet

Debouncing Search Input with SetTimeout in Vue

Debouncing is a performance pattern that limits the rate at which a function gets called. By clearing the previous timer on each keystroke and setting a new setTimeout, the reactive search query only updates after the user pauses typing for 300 milliseconds.

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

Breakdown

clearTimeout(debounceTimer);

Cancels any pending timer from previous keystrokes to prevent premature updates.

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

Schedules the reactive update to execute 300ms after the last input event.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Debouncing Search Input with SetTimeout in Vue

Related