setTimeout忽略超时？(立即开火)

Question

这是我第一次真正深入了解JavaScript.当然我以前用过它,但我从来没有真正从头开始写任何东西.

无论如何,我有一个非常奇怪的问题,我希望有人可以为我找到.

我正在尝试将文本从div淡出从黑色变为白色.很简单,是吗？

以下代码有效.它会将颜色更改为白色,但是会忽略500ms的setTimeout时间.

如果您使用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);
    }
}

Answer 1

你需要摆脱括号doFade().

括号立即调用该函数.

只需使用它: doFade

Answer 2

setTimeout(doFade(), 500);

这一行表示"执行doFade(),然后传递它返回的任何值setTimeout,这将在500毫秒后执行此返回值." 也就是说,你doFade()当场就在那里打电话.

跳过括号将函数传递给setTimeout:

setTimeout(doFade, 500);