Zpoždění vyhledávání AJAX pomocí nastavení JavaScriptu Timeout

Nedávno jsem vytvářel vlastní widget Dijit, který vyžadoval, aby byl seznam filtrován při každém stisknutí klávesy namísto použití obvyklého tlačítka „Odeslat“. Problém, na který jsem narazil (a předpokládal jsem), byl ten, že každé stisknutí klávesy způsobilo blikání seznamu a odpálení četných požadavků AJAX. Normální tok byl:

D
Da
Dav
Davu // Oops, mistyped!
Dav
Davi
David
David_ // Space
David_W //...and so on

Uživatelé, kteří rychle píší, nepotřebují seznam filtrovaný při každém stisknutí klávesy – to je plýtvání zpracováním na straně klienta. Jednoduchým řešením je použít nativní metodu setTimeout JavaScriptu ke zpoždění vyhledávání, dokud neuplyne daná doba nečinnosti. Uživatelé, kteří píší rychle, tak stránku nezanesou.

// Add an onChange to the textbox to listen to typing/changes
this.findTextbox.lastValue = "";
var timeout;
dojo.connect(this.findTextbox,"onKeyUp",this,function(){
	// Only fire change if value has changed
	var value = this.findTextbox.get("value");
	if(value != this.findTextbox.lastValue) {
		// Save the "last" value
		this.findTextbox.lastValue = value;
		// Delay before search in the case of typing
		if(timeout) { clearTimeout(timeout); }
		// Start new time out
		timeout = setTimeout(function() {
			// Do the search!
			console.warn("Doing search for " + value + ", time waited");
			// Process....
		},this.findKeyDelay);
	}
});

Je důležité uložit poslední hodnotu vstupu, aby byly "zbytečné" klávesy jako SHIFT , CONTROL a ostatní nespustí restart časovače. Pokud klíč změní hodnotu vstupního prvku před splněním časovače, časovač se vymaže a restartuje! Všimnete si, že nezajišťuji, že je přítomna hodnota - je to proto, že chci, aby pole vrátilo všechny výsledky, pokud uživatel něco vyfiltruje a poté smaže vstup! Tento typ řešení časovače ušetří spoustu nechtěného zpracování na straně klienta i serveru!