Не работает settimeout в цикле
Простой пример
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 сек. По факту, через пять секунд блок становится красным и скрипт остановлен. Подскажите, где ошибки и почему нет желаемого результата? |
Цитата:
Как некая иллюстрация содеянного...
<!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>
|
Цитата:
|
Как вариант...
<!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>
|
Цитата:
|
Цитата:
|
Цитата:
|
Добрый вечер!
А как быть с 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 раз другой. А должны они выполняться по очереди. |
mcreature, цикл убрать совсем. А setTimeoutы запускать друг из друга нужное количество раз...
|
Кроме setTimeout есть setInterval. Возможно, разобраться с ним будет проще.
|
| Часовой пояс GMT +3, время: 00:03. |