Fikk et spørsmål her i dag om hvordan man kan trigge et søk (eller hva som helst egentlig) et visst tidspunkt etter at noen skriver inn en tekst i en tekstboks. Dette er en smal sak egentlig, så her kommer en kjapp forklaring. Dette kan gjøres ganske enkelt ved bruk av funksjonen setTimeout(funksjon, tid). Denne tar inn funksjonen som blir kalt etter tiden tid har utløpt. For å bruke dette til å si hei, kan man gjøre slik:

var sayHello = function() {

      alert('Hello!');

}

setTimeout(sayHello, 1000);

eller enklere

setTimeout(function() {

      alert('Hello!');

}, 1000);

Så, for å knytte dette til et tekstfelt lager vi en input (feks med id="field"). Denne henter vi og setter på en lytter på onkeypress (som altså er når man trykker ned knapp) slik:

var get = function(id) {

      return document.getElementById(id);

}

var field = get('field');

field.onkeypress = function() {

       alert('Hello!');

}

eller kanskje enda mer spennende..

field.onkeypress = function() {

      alert(field.value);

}

For å knytte endene sammen, og for å få dette til å være en funksjon som ikke reagerer 1 sekund etter første tastetrykk, men etter siste, lager vi en onkeypress-funksjon som sletter den allerede igangsatte timeouten og setter på en ny for hvert tastetrykk. Slik får man en "delay"-effekt på fuksjonen som skal kalles. Dette kan feks brukes i sammenheng med et søk, der man kanskje vil vente et sekund etter brukeren har skrevet søket i tilfelle han ombestemmer seg. Så her er eksempel javascript kode

var field = get('field');

var timeout;

var callback = function() {

      alert(field.value);

}

field.onkeypress = function() {

      if(timeout)

          clearTimeout(timeout);

      timeout = setTimeout(callback, 1000); //1000ms = 1sec

}