SetTimeout игнорирует таймаут? (Пожары немедленно)

Это мое первое реальное погружение в JavaScript. Конечно, я использовал его раньше, но я никогда ничего не писал с нуля.

Во всяком случае, у меня очень странная проблема, и я надеюсь, что кто-то сможет понять меня.

Я пытаюсь сделать текст из div исчезающим с черного на белый. Простой, да?

Следующий код работает. Он изменит цвет на белый, однако время setTimeout 500 мс игнорируется.

Если вы используете Chrome и смотрите на консоль JS, вы легко увидите, что метод doFade() вызывается почти мгновенно, а не каждые 500 миллисекунд.

Кто-нибудь может это объяснить?

var started = false;
var newColor;
var div;
var hex = 0;

function fadestart(){
    if (typeof fadestart.storedColor == 'undefined') {
        div = document.getElementById('test');
        fadestart.storedColor = div.style.color;
    }
    if(!started){
        console.log('fadestart');
        newColor = fadestart.storedColor;
        started = true;
        setTimeout(doFade(), 500);
    }
}

function fadestop(){
    console.log('fadestop');
    div.style.color = fadestart.storedColor;
    started = false;
    hex = 0;
}

function doFade(){
    if(hex<=238){
        console.log(hex);
        hex+=17;
        div.style.color="rgb("+hex+","+hex+","+hex+")";
        setTimeout(doFade(), 500);
    }
}

ОТВЕТЫ

Ответ 1

Вам нужно избавиться от круглых скобок на doFade().

Скобки запускают функцию мгновенно.

Просто используйте это вместо: doFade

Ответ 2

setTimeout(doFade(), 500);

В этой строке указано "выполнить doFade(), а затем передать любое значение, которое оно возвращает, в setTimeout, которое будет выполнять это возвращаемое значение после 500 миллисекунд". I.e., вы вызываете doFade() прямо там на месте.

Пропустите круглые скобки, чтобы передать функцию setTimeout:

setTimeout(doFade, 500);

Ответ 3

Я думаю, вы должны использовать setTimeout(doFade, 500); или setTimeout("doFade()", 500);