Форум

Poveritov · #1 (**permalink**) 31.03.2015, 15:36

Простой пример

var l=1
for(var i=0; i<10; ++i){
      (function(e){
            setTimeout(function(){
                      if(l==1){
                          $('#component-1').css('background-color','#dddddd');
                            l=2;
                      }
                        if(l==2){
                                $('#component-1').css('background-color','red');
                             l=1;
                      }
                                                                    
         },5000);
    })(i)
                                                        
}

Как я вижу это, десять раз будет изменен цвет у блока через каждые 5 сек.

По факту, через пять секунд блок становится красным и скрипт остановлен.

Подскажите, где ошибки и почему нет желаемого результата?

ksa · #2 (**permalink**) 31.03.2015, 16:06

Сообщение от Poveritov

Как я вижу это, десять раз будет изменен цвет у блока через каждые 5 сек.

А на деле просто запущено 10 потоков, каждый из которых просто выполнит, что в нем написано...

Как некая иллюстрация содеянного...

<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
for(var i=0; i<10; ++i){
	(function(N){
		setTimeout(function(){
			var o=document.createElement('P');
			o.innerHTML=N;
			document.getElementById('test').appendChild(o);
			
		},5000);
	})(i)
};
</script>
</head>
<body>
<div id='test'></div>
</body>
</html>

ksa · #3 (**permalink**) 31.03.2015, 16:12

Сообщение от Poveritov

Подскажите, где ошибки и почему нет желаемого результата?

В не понимании принципа работы setTimeout()...

ksa · #4 (**permalink**) 31.03.2015, 16:19

Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
#test {
	background-color: #dddddd;
}
</style>
<script type='text/javascript'>
$(function(){
	for (var i=0; i<10; ++i){
		(function(e){
			setTimeout(function(){
				var o=$('#test');
				if (o.data('iteration')==1){
					o.css('background-color','#dddddd');
					o.data('iteration',2);
				} else {
					o.css('background-color','red');
					o.data('iteration',1);
				}

			},5000*(i+1));
		})(i)
	};
});
</script>
</head>
<body>
<div id='test'>Test</div>
</body>
</html>

jsnb · #5 (**permalink**) 31.03.2015, 17:05

Сообщение от ksa

А на деле просто запущено 10 потоков, каждый из которых просто выполнит, что в нем написано...

А JS уже стал многопоточным?

Poveritov · #6 (**permalink**) 31.03.2015, 17:21

Сообщение от ksa

Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
#test {
	background-color: #dddddd;
}
</style>
<script type='text/javascript'>
$(function(){
	for (var i=0; i<10; ++i){
		(function(e){
			setTimeout(function(){
				var o=$('#test');
				if (o.data('iteration')==1){
					o.css('background-color','#dddddd');
					o.data('iteration',2);
				} else {
					o.css('background-color','red');
					o.data('iteration',1);
				}

			},5000*(i+1));
		})(i)
	};
});
</script>
</head>
<body>
<div id='test'>Test</div>
</body>
</html>

Работает как нужно, спасибо за помощь!

ksa · #7 (**permalink**) 01.04.2015, 08:35

Сообщение от jsnb

А JS уже стал многопоточным?

Назови асинхронный запуск функции как тебе больше нравится...

mcreature · #8 (**permalink**) 12.04.2017, 00:09

Добрый вечер!
А как быть с 2-мя setTimeout в цикле, которые должны выполняться по очереди?

for(var i = 0; i <= 7; i++) {
							(function(e) {
								setTimeout(function() {
									$('#block2 .variant:eq(' + e + ')').addClass('active');
									setTimeout(function() {
										$('#block2 .variant:eq(' + e + ')').removeClass('active');
									}, timeout);	
								}, timeout);	
							})(i);	
							timeout += 200;
						}

Сейчас сначала 10 раз выполняется один setTimeout, потом 10 раз другой. А должны они выполняться по очереди.

ksa · #9 (**permalink**) 12.04.2017, 08:26

mcreature, цикл убрать совсем. А setTimeoutы запускать друг из друга нужное количество раз...

SV0L0CH · #10 (**permalink**) 12.04.2017, 12:00

Кроме setTimeout есть setInterval. Возможно, разобраться с ним будет проще.

Форум

Справочник

Discord чат

Курсы javascript