Strona główna HTML i javascript C++ Hardware HTML i javascript Java Software SQL flag_united_kingdom flag_poland

Javascript - funkcja sleep, własna interpretacja.

Dodano: 2011-10-15

W javascript nie istnieje funkcja sleep(), ale w uproszczeniu istnieje jej odpowiednik funkcja setTiemout().

Wiele osób uważa, że w javascript nie potrzebna jest funkcja sleep(), ponieważ nie istnieje dobre uzasadnienie dla jej używania skoro, są inne sposoby osiągnięcia tych samych efektów bez użycia typowej funkcji uśpienia programu.

W przypadku tworzenia skryptów w języku js na pewno napotkasz na sytuacje, w których setTimeout() nie będzie w pełni cię satysfakcjonował, lecz po przemyśleniu problemu będziesz w stanie ją dobrze wykorzystać.

Najlepiej jest mówić na podstawie przykładu. Wykonując pewne operację możemy chcieć, żeby poszczególne funkcje wykonywały się z pewnym opóźnieniem jedna po drugiej. Sytuacja może wyglądać następująco jeżeli by istniała funkcja sleep():

// pseudo kod
function start(){

	fun01();
	sleep(1000);
	fun02();
	sleep(1000);
	fun03();
}

Teraz zaimplementujmy to w javascript():

function fun01(){
	document.getElementById('TEMP').innerHTML += "fun01(); 
"; setTimeout(function(){fun02();}, 1000); } function fun02(){ document.getElementById('TEMP').innerHTML += "fun02();
"; setTimeout(function(){fun03();}, 1000); } function fun03(){ document.getElementById('TEMP').innerHTML += "fun03();
"; } function start(){ fun01(); }

Trochę dużo roboty, co nie jest ładne i nie zawsze można lub chcesz modyfikować istniejące już funkcje.

Na ułatwienie sobie działania w takich sytuacjach, warto stworzyć klasę implementującą sleep(), w taki sposób, żeby można było w prosty sposób wywołać istniejące funkcję w pewnych odstępach czasowych bez konieczności ingerenci lub ciągłego tworzenie funkcji które to rozwiążą. Klasa jsSleep() umożliwia wywołanie funkcji w pewnych odstępach czasowych w łatwy sposób - przynajmniej ja tak uważam ;) Najpierw należy utworzyć obiekt klasy jsSleep() następnie przy użyciu metody setFunction([nameFunction], timeToWaitInMs) podać nazwę funkcji jaką chcemy wywołać po pewnym okresie czasu. Po zaprogramowaniu kolejności należy wywołać metodę sleep([objectJsSleep]). Klasa poniżej (używając podaj autora :):

Drukuj Zaznacz kod
jsSleep.js
// autohor lis 
function jsSleep(){

	function init(){
		nextElemNum = 0;
		checkedElemNum = 0;
		arrFun = new Array();
	}

	this.setFunction = function(nameFunction, sleepTime){
		arrFun[nextElemNum] = new Array(2);
		arrFun[nextElemNum][0] = nameFunction;
		arrFun[nextElemNum][1] = sleepTime;
		nextElemNum++;		
	}

	this.getElement = function(num){
		return arrFun[num][0] + "; " + arrFun[num][1];
	}

	this.getElementOnPos = function(num, pos){
		return arrFun[num][pos];
	}


	this.getNextElemNum = function(){
		return nextElemNum;
	}

	this.getCheckedElemNum = function(){
		return checkedElemNum;
	}

	this.setCheckedElemNum = function(addNum){
		temp = checkedElemNum;
		checkedElemNum += addNum;
		return temp;
	}

	this.runFunction = function(numberInArray){
		arrFun[numberInArray][0]();
	}


	var nextElemNum;
	var checkedElemNum;
	var arrFun;

	// blok inicjujący
	init();
}

jsSleep.prototype = {
	sleep: function(jsClass){
		if (this.getCheckedElemNum() != this.getNextElemNum){
			this.runFunction(this.getCheckedElemNum());
			 setTimeout(function(){jsClass.sleep(jsClass);}, 

this.getElementOnPos(this.setCheckedElemNum(1), 1));
		}

	}
}

Teraz przykład użycia:

Drukuj Zaznacz kod
jsSleep_test.htm
<html>
<head>
<script type="text/javascript">

// autohor lis 
function jsSleep(){

	function init(){
		nextElemNum = 0;
		checkedElemNum = 0;
		arrFun = new Array();
	}

	this.setFunction = function(nameFunction, sleepTime){
		arrFun[nextElemNum] = new Array(2);
		arrFun[nextElemNum][0] = nameFunction;
		arrFun[nextElemNum][1] = sleepTime;
		nextElemNum++;		
	}

	this.getElement = function(num){
		return arrFun[num][0] + "; " + arrFun[num][1];
	}

	this.getElementOnPos = function(num, pos){
		return arrFun[num][pos];
	}


	this.getNextElemNum = function(){
		return nextElemNum;
	}

	this.getCheckedElemNum = function(){
		return checkedElemNum;
	}

	this.setCheckedElemNum = function(addNum){
		temp = checkedElemNum;
		checkedElemNum += addNum;
		return temp;
	}

	this.runFunction = function(numberInArray){
		arrFun[numberInArray][0]();
	}


	var nextElemNum;
	var checkedElemNum;
	var arrFun;

	// blok inicjujący
	init();
}

jsSleep.prototype = {
	sleep: function(jsClass){
		if (this.getCheckedElemNum() != this.getNextElemNum){
			this.runFunction(this.getCheckedElemNum());
			 setTimeout(function(){jsClass.sleep(jsClass);}, 

this.getElementOnPos(this.setCheckedElemNum(1), 1));
		}

	}
}


//test

function fun01(){
	document.getElementById('TEMP').innerHTML += "Funkcja fun01!!!<br>";
}

function fun02(){
	document.getElementById('TEMP').innerHTML += "Funkcja fun02!!!<br>";
}

function fun03(){
	document.getElementById('TEMP').innerHTML += "Funkcja fun03!!!<br>";
}

function sleep(){
	sl = new jsSleep();
	sl.setFunction(fun01, 1000);
	sl.setFunction(fun02, 1000);
	sl.setFunction(fun03, 2000);
	sl.sleep(sl);
}

</script>
</head>

<body>

<input type="button" onclick="sleep();" value="ok">
<div id="TEMP"></div>

</body>
</html>