Callback funkcije u JavaScriptu

Tajmer

  function fun()      // callback funkcija
  {
    // menja boju pozadine dokumenta
    document.body.style.backgroundColor = "#003";
  }
	  
	window.setTimeout(fun, 4000);   // posle 4 sec poziva callback funkciju

Ovo je jednostavan primer u kome smo postavili tajmer i zadali funkciju fun() kao callback, koja se poziva posle 4 sekunde (4000 milisekundi). Ovo je tipičan primer pauziranja izvršavanja programa - sve se završi, a onda se, 4 sekunde kasnije, ponovo aktivira. Inače funkcija promeni boju pozadine dokumenta u tamno plavu.

Obratite pažnju kako navodimo callback funkciju u metodu setTimeout(). Navodi se samo naziv funkcije: setTimeout(fun, 4000). Nikako ne navodimo funkciju sa zagradama - to bi bio poziv funkcije. Dakle, pogrešno bi bilo: setTimeout(fun(), 4000).

Ok, i ovde postoje "napredni" izuzeci - moguće je zadati i poziv funkcije, ali pod uslovom da je to funkcija višeg reda, koja kao rezultat vraća našu callback funkciju. Ovo je već malo naprednija tehnika i zahteva odlično poznavanje funkcionalnog programiranja i lambda izraza.

Niz

  var niz = [14, 5, 6, -2, 7];
  
  if (niz.every(veci)) {  // ovde zadajemo callback funkciju
    console.log("Svi elementi su veći od nule.");
  }
  
  function veci(a)        // deklaracija callback funkcije
  {
    return a > 0;
  }

Svaki Array objekat ima metod every() koji je samo jedan od metoda kojim se "obrađuju" elementi niza. Konkretno ovaj metod koristimo ako je potrebno da se ispita da li svaki pojedini element zadovoljava neki uslov. To znači da metod auitomatski prolazi kroz sve elemente niza i ako je svaki zadovoljio, kao rezultat vraća vrednost true.

Ideja je da sam objekat Array obezbedi najbrži mogući prolazak kroz niz, a da programer napravi callback funkciju koja za jednu prosleđenu vrednost vraća rezulatat da li ta vrednost zadovoljava uslov ili ne. Array objekat za svaki elemenat niza poziva tu funkciju i prikuplja dobijene rezultate.

U ovom slučaju je funkcija veci() u ulozi callback funkcije, pošto je zadajemo kao parametar metodu every().

Event handler

  obj = document.createElement("div");
  obj.innerHTML = "BLOK";
  obj.addEventListener("click", klik);  // definišemo event handler
  document.body.appendChild(obj);

  function klik() {                     // deklaracija event handler funkcije
    this.style.color = "#f00";
    this.style.backgroundColor = "#ffc";
  }

U gornjem primeru, kreirali smo DIV blok, zadali mu tekst "BLOK" i dodali funkciju klik() koja reaguje na događaj "click" (klik mišem), pomoću metoda addEventListener(). Samim tim funkcija klik() postaje event handler, koji "opaljuje" u trenutku kada korisnik klikne na DIV blok.

U funkciji klik() se vidi da će DIV blok, kada se klikne na njega, promeniti boju teksta i boju pozadine. Nemojte da vas zbunjuje objekat this. njega ćemo objasniti malo kasnije. Za sada je dovoljno da znate da se u ovom slučaju this odnosi na kliknuti objekat.