JavaScript - setTimeout() dlaczego warto stosować.

Modyfikacja: 2011-04-29

Javascript umożliwia wykonywanie wielu obliczeń dotyczących bezpośrednio strony internetowej, bez konieczności korzystania z innych języków programowania. Wręcz jest wskazane stosowanie języka skryptowego Javascript, z powodów szybkości działania w przeglądarkach internetowych jak i małego obciążenia łącza.

Wykonywanie w pętli lub rekurencyjne jakiejś operacji w każdym języku wiąże się z zajęciem zasobów przez „program” na wykonanie tej czynności. Bez uśpienia tej operacji na kilka milisekund spowodowałoby to zablokowanie strony, która wydawałaby się na zepsutą. W Javascripcie jest możliwe przerwanie działania skryptu przez użycie funkcji setTimeout(). Przyjmuje ona następujące parametry nazwaFunkcji, która ma zastać wykonana po upływie określonego czasu, czasZwłoki jest to okres opóźnienia wykonania funkcji podawany w milisekundach:

setTimeout('nazwaFunkcji()', czasZwłoki);

Funkcja setTimeout() ma coś w sobie z funkcji przerwania (Sleep()) oraz wątków (thread) popularnych języków programowania, nie można jednak powiedzieć, że działa dokładnie jak powyżej wymienione metody uśpienia i/lub przerwania wykonywania kodu. Funkcja Javascript setTimeout() przerywa wykonanie danej funkcji do momentu upływu określonego czasu, jednak dalsza część kodu jest nadal wykonywana - trochę wątku i przerwania ;)

Poniżej przykład pokazujący przerwanie i wykonanie dalszej części kodu w chwili kiedy będziemy tego chcieli, wystarczy tylko wstawić warunek, który w odpowiednim miejscu pozwoli na dalsze wykonanie kodu funkcji.

Drukuj Zaznacz kod
<html>
<head>

<script type="text/javascript">
<!--

function writeText(count){
	document.getElementById("TEXT1").value = count;
	// Dzięki temu warunkowi będzie wykonywane odliczanie.
	// Klauzula else zapobiega wykonaniu dalszej części kodu,
	// do momentu zakończenia odliczania.
	if (count > 0)
		setTimeout(function(){writeText(count-1);}, 1000);
	else
		document.getElementById("TEXT1").value = "Koniec odliczania!!!";
}

//-->
</script>

</head>

<body bgcolor="silver">

<input id="TEXT1" type="text" />
<input type="button" value="Start" onclick="writeText(3);" /><br>
<a href="http://wp.pl">wp.pl</a>

</body>
</html>

Można powiedzieć, że setTimeout() jest gorszą wersją wątku, jednak wystarczającą na potrzeby tworzenia stron internetowych. Można napisać własną funkcję Sleep(), jednak będzie ona tylko przerywała wykonanie kodu za cenę blokady strony - a chyba o to nie chodziło.

Funkcji setTimeout() w pętlach for, while, repat itp. należy używać rozważnie. W przypadku gdy inicjujemy funkcje setTimeout() stałymi, lub generowanymi czasowo zmiennymi można bez obaw ją stosować lub jeżeli setTimeout() jest umieszczona w funkcji wywoływanej w pętli. Jeżeli będziemy inicjować funkcję zmiennymi funkcji wywołującej, które są modyfikowane nie osiągniemy oczekiwanych efektów, ponieważ po zmianie wartości zmiennej, będzie ona użyta w czasie wywołania, tzn. funkcja zapamiętuje wskaźnik do zmiennej.

Przykład użycia bezpiecznie funkcji:

Drukuj Zaznacz kod
<html>
<head>

<script type="text/javascript">
<!--

function writeText(count, id){
	document.getElementById(id).value = count;
	if (count > 0)
		setTimeout(function(){writeText(count-1, id);}, 1000);
	else
		document.getElementById(id).value = "Koniec odliczania!!!";
}

function initWriteText(count){
	for (var i=1; i<5; i++)
		writeText(count+i, "TEXT" + i);
}

//-->
</script>

</head>

<body bgcolor="silver">

<input id="TEXT1" type="text" /><br>
<input id="TEXT2" type="text" /><br>
<input id="TEXT3" type="text" /><br>
<input id="TEXT4" type="text" />
<input type="button" value="Start" onclick="initWriteText(3);" /><b>
<a href="http://wp.pl">wp.pl</a>

</body>
</html>

Miłej zabawy z setTimeout() ;-)