setTimeout в цикле
Добрый день! У меня есть функция анимации, проявляющая элементы и срабатывающая, когда пользователь скроллит до элемента. Появилась необходимость при срабатывании функции последовательно проявить элементы списка.
Я хотел сделать так:
var list = $('#suitable').find('li');
var timeout = 0;
for(var i = 0; i < list.length; i++) {
setTimeout(function() {
$(list[i]).css('opacity', 1).css('transform', 'scale(1, 1)')
}, timeout);
timeout += 250;
};
Однако, этот код не работает. Не могли бы ли вы подсказать мне, что с ним не так, и как его можно правильно переделать? |
Цитата:
|
Для правильного использования значения переменной i используй такой вариант
var list = $('#suitable').find('li');
var timeout = 0;
for(var i = 0; i < list.length; i++) {
setTimeout(
(function (N){
return function() {
$(list[N]).css('opacity', 1).css('transform', 'scale(1, 1)')
}
})(i)
,
timeout
);
timeout += 250;
};
|
Спасибо! Правда я так и не понял, почему функция setTimeout не может использовать объявленную в цикле переменную
|
http://learn.javascript.ru/play/Rw26Hb
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<style>
#list > li {
display: none;
margin: 10px;
}
</style>
</head>
<body>
<ul id="list">
<li>Лист 1</li>
<li>Лист 2</li>
<li>Лист 3</li>
<li>Лист 4</li>
<li>Лист 5</li>
</ul>
<script>
$(function() {
var list = $('#list > li'),
i = 0, show;
(show = function() {
if(i++ > list.length) return;
list.eq(i).slideDown(300, show);
})();
});
</script>
</body>
</html>
|
Цитата:
Только со значением, которое у нее будет на момент запуска самой функции. А не на момент выполнения собственно setTimeout()... |
Цитата:
|
Цитата:
|
Цитата:
animate( параметры, [duration], [easing], [вызов] ) |
Цитата:
К тому времени, когда истечет тот таймаут, значение переменно будет не такое, что было в момент запуска этого таймаута... Пример
(function (){
var i=1;
setTimeout(function (){alert(i)},1000);
i=10;
})();
|
| Часовой пояс GMT +3, время: 23:29. |