Debounced watchers pattern in Vue - Step-by-Step Execution

Concept Flow - Debounced watchers pattern

Data changes

↓

Watcher triggers

↓

Start debounce timer

↓

If new change before timer ends

↓

Reset timer

↓

Timer ends -> Run effect

When data changes, the watcher starts a timer. If data changes again before timer ends, timer resets. Effect runs only after no changes for set time.

Execution Sample

Vue

import { ref, watch } from 'vue'

function debounce(fn, delay) {
  let timeout;
  return function(newVal) {
    if (timeout) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(() => {
      fn(newVal);
    }, delay);
  };
}

const search = ref('');

function debounceHandler(newVal) {
  console.log('Search:', newVal);
}

const debouncedHandler = debounce(debounceHandler, 300);

watch(search, debouncedHandler);

This code watches the 'search' ref and runs debounceHandler only after 300ms of no changes.

Execution Table

Step	Data Change	Timer Status	Action	Effect Run
1	search = 'a'	Timer started (300ms)	Wait for debounce	No
2	search = 'ab' (within 300ms)	Timer reset (300ms)	Wait for debounce	No
3	search = 'abc' (within 300ms)	Timer reset (300ms)	Wait for debounce	No
4	No change for 300ms	Timer ends	Run debounceHandler('abc')	Yes
5	search = 'abcd'	Timer started (300ms)	Wait for debounce	No
6	No change for 300ms	Timer ends	Run debounceHandler('abcd')	Yes
7	No further changes	No timer	Idle	No

💡 No further data changes, debounce timer ended, effect executed.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	After 6	Final
search	''	'a'	'ab'	'abc'	'abc'	'abcd'	'abcd'	'abcd'
Timer	off	on (300ms)	reset (300ms)	reset (300ms)	ended	on (300ms)	ended	off
Effect Run	No	No	No	No	Yes	No	Yes	No

Key Moments - 3 Insights

Why doesn't the effect run immediately when 'search' changes?

Because the watcher uses debounce, it waits for 300ms of no changes before running the effect, as shown in steps 1-4 in the execution_table.

What happens if 'search' changes multiple times quickly?

The debounce timer resets each time, delaying the effect until changes stop, as seen in steps 2 and 3 where the timer resets.

When exactly does the debounceHandler function run?

It runs only after the timer ends with no new changes, shown in steps 4 and 6 where the effect runs after 300ms idle.

Visual Quiz - 3 Questions

Look at the execution_table, what is the timer status at step 3?

A Timer ended

B Timer off

C Timer reset (300ms)

D Timer started (100ms)

💡 Hint

Check the 'Timer Status' column at step 3 in the execution_table.

At which step does the effect first run?

A Step 2

B Step 4

C Step 5

D Step 6

💡 Hint

Look at the 'Effect Run' column to find the first 'Yes'.

If the 'search' value changed again at step 4 before timer ended, what would happen?

A Timer resets and effect delays

B Timer stops and effect never runs

C Effect runs immediately

D Effect runs twice

💡 Hint

Refer to steps 2 and 3 where timer resets on quick changes.

Concept Snapshot

Debounced watchers delay running effects until data stops changing for a set time.
Use watch() with debounce option or manual timer.
Multiple quick changes reset the timer.
Effect runs only after no changes for debounce period.
Helps avoid running expensive code too often.

Full Transcript

In Vue, a debounced watcher waits for data to stop changing before running its effect. When the watched data changes, a timer starts. If the data changes again before the timer ends, the timer resets. Only after the data stays unchanged for the debounce time does the effect run. This pattern prevents running code too often during rapid changes, like typing in a search box. The execution table shows each data change, timer status, and when the effect runs. Variables like 'search' and the timer state update step-by-step. Key moments clarify why the effect delays and how timer resets work. The quiz tests understanding of timer status and effect timing. This pattern improves performance and user experience by reducing unnecessary work.