javascript timeout в цикле

Question

Я изучаю javascript для удовольствия, и у меня есть странная проблема. Я пытаюсь создать свою собственную функцию fade-in. Однако мой код не работает, он просто показывает «content» div в полной непрозрачности.

Функция setContentOpacity делает работы, я сам тестировал его и работает как шарм.

В идеале, что я думаю, должно быть, что 1000 вызовов «setTimeout» должны быть помещены в «стек», причем первый из них устанавливает непрозрачность низкого уровня без тайм-аута, второй устанавливает непрозрачность немного выше с небольшим таймаутом , вплоть до последнего вызова, который задает непрозрачность до 1000 с тайм-аутом 3000.

В принципе, он должен установить непрозрачность 0 сразу, до ~ 333 за 1 секунду, до ~ 666 за 2 секунды и до 1000 секунд за 3 секунды. Я думаю, что моя логика звучит здесь; вызовы для настройки непрозрачности должны решаться со временем, что создает эффект затухания.

Так вот код Релевент:

<script language='JavaScript' type='text/JavaScript'> 

//takes a value from 0-1000 
function setContentOpacity(value) { 
    document.getElementById('content').style.opacity = value/1000; 
    document.getElementById('content').style.filter = 'alpha(opacity=' + value/10 + ')'; 
} 

function fadeInContent(){ 

setContentOpacity(0); 

for (var i=0;i<=1000;i++) 
{ 
    setTimeout(function(){setContentOpacity(i);}, (i*3)); 
} 


} 

onload=fadeInContent; 

</script> 

(примечание: я попытался назвать просто SetTimeout (setContentOpacity (я), (я * 3)) ;, но это не похоже на работу, и я получил немного лучшие результаты, используя анонимную функцию)

Подумайте, что здесь не так? Заранее спасибо!

Answer 1

При назначении setTimeout вам необходимо записать значение i.

Попробуйте

for (var i=0;i<=1000;i++) 
{ 
    (function(ind) { 
     setTimeout(function(){setContentOpacity(ind);}, (ind*3)); 

    })(i); 
} 

Как вы знаете, область видимости переменной является функцией области видимости. И то же значение i разделяется всеми обратными вызовами setTimeout. Таким образом, значение i будет 1000. Похоже, что это не повлияло, это потому, что значение области видимости переменной всегда будет последней итерацией, поскольку она разделяется одной и той же общей областью. , Включив его в Immediately Invoked Function Expression, вы создаете новую функцию со значением i.

Check Fiddle

Answer 2

Я думаю, что главная проблема в том, что вы создаете в 1000 setTimeout обратных вызовов. Альтернатива, если вы хотите запустить что-то каждые x секунд, будет setInterval.

var i = 0; 
var refreshIntervalId = window.setInterval(function(){ 
    setContentOpacity(i * 3); 
    i++; 

    if(i > 1000) { 
     clearInterval(refreshIntervalId); 
    } 
}, 1000); 

Он будет выполняться один раз в секунду (1000 мс), вызывая вашу функцию непрозрачности каждый раз, пока она не упрется в 1000, затем выключится снова.