web-dev-qa-db-ja.com

setTimeoutはタイムアウトを無視しますか? (すぐに発火)

これは、JavaScriptへの私の最初の本当の飛び込みです。確かに私はそれを以前に使用したことがありますが、実際に最初から何も書いたことがありません。

とにかく、私は非常に奇妙な問題を抱えており、誰かが私のために理解してくれることを願っています。

Divのテキストを黒から白にフェードさせようとしています。簡単ですね

次のコードworks。色は白に変わりますが、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);
    }
}
30
Jonah H.

doFade()の括弧を取り除く必要があります。

括弧は関数を即座に呼び出します。

代わりにこれを使用してください:doFade

58
KeatsKelleher
_setTimeout(doFade(), 500);
_

この行には、「doFade()を実行してから、返された値をsetTimeoutに渡します。これにより、500ミリ秒後にこの戻り値が実行されます。」つまり、その場でdoFade()を呼び出しています。

括弧をスキップしてpass関数をsetTimeoutに:

_setTimeout(doFade, 500);
_
21
deceze

setTimeout(doFade, 500);またはsetTimeout("doFade()", 500);を使用する必要があると思います

4
PeterWong