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);

Answer 3

我认为您应该使用setTimeout(doFade, 500);或setTimeout("doFade()", 500);