0

ページの一部の要素をフェードインまたはフェードアウトするJavaScriptの関数を設定しようとしています。フェード自体は正常に機能しますが、一方が他方のアクションをキャンセルしようとすると問題が発生します。

//I know this is ugly, I'm just learning JavaScript again and plan to recode it after I learn some more...
var fadeOut = false

//set out to true to fade out, false to fade in
function fade(out) {
    var steps = 1
    var outSpeed = 100
    var inSpeed = 10
    var timer = 0

    if (out) {
            //fade out
            fadeOut = true
            for ( var i=100; i>=0; i-=steps ) {
                    if ( fadeOut ) {
                            setTimeout("set_el_opacity(" + (i / 100) + ")",
                            timer+=steps
                    } else {
                            break;
                    }
            }
    } else {
            //fade in
            fadeOut = false
            for ( var i=0; i<=100; i+=steps ) {
                    if( !fadeOut ) {
                            setTimeout("set_el_opacity(" + (i / 100) + ")",
                            timer+=steps
                    } else {
                            break;
                    }
            }
    }
}

ここで、フェードアウトはフェードインよりも遅く実行されるように設定されています。ユーザーがゆっくりとフェードアウトするのを見て、それが意図的であることを認識し、要素が必要な場合はすばやくフェードインするようにします (画面から混乱を取り除きます)。不要な場合）。

fade(true) は正常に動作し、fade(false) は正常に動作し、より高速です。私の問題は、fade(true) に続いてすぐに fade(false) を呼び出すと発生します。フェードは互いに戦い、その後、fade(true) 呼び出しがより速く実行されるため、最初に終了し、fade(false) 呼び出しがすべてを完全にフェードアウトします。

私の質問は次のとおりです。fade(false)呼び出しでfade(true)呼び出しのループをキャンセルするにはどうすればよいですか?

4

4 に答える 4

7

タイマーを設定すると：

mytime = setTimeout('function()', 1000);

clearTimeout を使用してキャンセルできます。

clearTimeout(mytime);
于 2009-10-28T15:49:09.743 に答える
0

You should cancel the active timeout whenever fade() is called, using the clearTimeout() function. For more information on timeouts, check out this article. Here is a brief example based on the code you provided.

var timeoutId = null;

function fade(out) {
    // ...
    // Your variable declarations
    // ...

    // Cancel the active timeout, if any.
    clearTimeout(timeoutId);

    // Record the timeout ID inside your if-else blocks
    if (out) {
        // ...
        timeoutId = setTimeout( ... );
        // ...
    } else {
        // ...
        timeoutId = setTimeout( ... );
        // ...
    }
}
于 2009-10-28T15:51:34.373 に答える
0

まず、ループ内で多数のタイマーを起動することはお勧めできません。代わりに、ハンドラーsetIntervalから新しいタイマーを使用または起動する必要があります。setTimeout

もう 1 つの方法は、一定の間隔で起動し、保留中のすべての効果を管理する単一のタイマーを用意することです。フレーム レートを決定し、タイマー (「タイマー スタック」) を無期限に実行し、フレームごとに「刻み」ます。オプションで、保留中の効果がないときに刻みを開始/停止できます。

于 2009-10-28T16:17:43.957 に答える