0

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

実際のコード：

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

だから私は次の解決策を思いついた：

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

function stopFading() {

    console.log("stop");
    clearInterval(start);
}


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

そして、それは問題を修正します。ただし、FFの場合のみ。FFでは、スクリプトは完璧に実行されます。Chromeのwindow.onfocusは2回呼び出されます！なぜ2回？

別の方法で最初の問題を修正するか、Chromeで2番目の問題を修正するのを手伝ってください。どうも！

4

1 に答える 1

0

これは既知のクロムバグのようです。

http://code.google.com/p/chromium/issues/detail?id=117307

考えられる解決策は次のとおりです。

  1. jQueryを使用している場合は、$.on('focus', startFading)
  2. ブール値を設定して、startFadingが複数回呼び出されないようにすることができます。

例：

var startedFading = false;

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

function stopFading() {
    startedFading = false;
    console.log("stop");
    clearInterval(start);
}
于 2013-01-13T03:18:16.833 に答える