JavaScript - setTimeout() w klasie.

Modyfikacja: 2010-05-24

Funkcja setTimeout służy do wykonywania danego zadania (operacji) co pewien czas, dzięki czemu linki oraz inne zadania na stronie nie są blokowane poprzez wykonywanie czasochłonnych obliczeń w javascript. Jeżeli powyższej funkcji używamy w napisanym strukturalnie kodzie, to nie napodkamy na większe problemy.


function addChar(c){
	document.getElementById('TEXT1').value = document.getElementById('TEXT1').value + c;
	setTimeout(function() {addChar(c);}, 1000); 
}

Schody zaczynają się dopiero gdy użyjemy setTimeout w klasie. Jeżeli będziemy z niej chcieli skorzystać w sposób podobny do przykłady powyżej niestety nie zadziała. Jednym ze sposobów jest użycie jej poprzez podanie trzech parametrów, działa ona tylko w przeglądarkach Firefox 3.x Opera 9.x (w nich testowałem), IE8 jest oporne i uznaje zapis jako błąd na stronie.


function myTime(){
	this.addChar = function(c){
		document.getElementById('TEXT1').value = document.getElementById('TEXT1').value + c;
		thisObj = this;
		setTimeout(function(thisObj) { thisObj.addChar(c); }, 1000, this);
	}
}

Najlepsze rozwiązanie tego problemu to użycie prototype, dzięki temu rozwiązaniu będziemy w stanie użyć obiektu napisanej przez nas klasy z funkcją setTimeout bez potrzeby sprawdzania z jaką przeglądarką mamy do czynienia, nie będzie też potrzebne tworzenie żadnych zmiennych globalnych (?), ani też tworzenie dodatkowej funkcji, nie należącej do klasy operującej na obiekcie.


function myTime(){
	this.addChar = function(c){
		document.getElementById('TEXT1').value += c;
	}
}

myTime.prototype = { 
  f : function(mt, c){
	this.addChar(c);
    setTimeout(function(){mt.f(mt, c);}, 1000); 
  }  
}  

//wywołanie będzie wyglądało następująco
function start(){
	var mt = new myTime();
	mt.f(mt, "a");
}