1

いくつかの画像をフェードインおよびフェードアウトする簡単なスクリプトがあります。別のタブに切り替えてから元に戻す前に、それは完全に正常に機能します。元に戻った後、アニメーションを実行する間隔がクリアされず、animateFading機能が実行され続けているようです。

なぜそれが起こっているのですか、タブの切り替えはスクリプトにどのように影響しますか? そして、どうすればそれを適切に機能させることができますか? どうも！

実際のコード:

var img0 = document.getElementById("image0");
var img1 = document.getElementById("image1");
var img2 = document.getElementById("image2");

var imgs = [img0,img1,img2];

var intervalFading;
var intervalAnimate;

var imgThis = 0;
var imgNext = 1;

var fadeIn = 0;
var fadeOut = 1;

var start;



function animateFading() {
    fadeIn+=0.1;
    fadeOut-=0.1;
    imgs[imgThis].style.opacity = fadeOut;
    imgs[imgNext].style.opacity = fadeIn;

    if (fadeIn >= 1) {
        clearInterval(intervalAnimate);

        if (imgNext < 2) {
            imgNext++;
        } else {
            imgNext = 0;
        }

        if (imgThis < 2) {
            imgThis++;
        } else {
            imgThis = 0;
        }

        fadeIn = 0;
        fadeOut = 1;
    }

}

function fading() {
    intervalAnimate = setInterval(animateFading,50);
}

function startFading() {
    start = setInterval(fading, 3000);
}

window.addEventListener('load', startFading);

解決：

var startedFading = false;

function startFading() {
    if (!startedFading) {
        startedFading = true;
        startFading = setInterval(fading, 5000);
        }
}

function stopFading() {
    startedFading = false;
        clearInterval(startFading);
}


window.addEventListener('focus', startFading);      
window.addEventListener('blur', stopFading);

ブール値はChrome用で、2回起動します

window.addEventListener('focus', startFading);

&

window.addEventListener('blur', stopFading);
4

1 に答える 1

1

ほとんどのブラウザには、メモリ使用容量を唯一のアクティブなタブ (現在表示中) にリダイレクトする機能があります。したがって、現在のタブを切り替えると、setIntervalとのsetTimeoutタイミングが影響を受けます (Google Chrome を使用している場合は、Shift+Esc を押すと、各タブのメモリ使用量を確認できます。現在のタブは最大 25% 使用されますが、残りのタブは使用されます)。 5％を通過しないでください）

于 2013-01-13T14:03:17.217 に答える