私はjQueryの本を読んでいて、例をやろうとしています。例では画面上で稲妻が点滅しており、その部分は正常に動作しています。問題は、タブを切り替えてから元に戻すと、稲妻が立て続けに点滅し始めることです。この問題は、window.onblur および window.onfocus イベントを使用して修正されるはずですが、機能していません。誰かが私が間違っていることを見ることができますか?
異なる ID を持つ 3 つの隠された稲妻の画像と、それぞれを点滅させる 3 つの異なる関数があります。goLightning() は各関数の実行間隔を設定し、stopLightning() はその間隔をクリアする必要があります。その部分は、私が知っている限りでは機能していないようです。コードは次のとおりです。
$(document).ready(function(){
goLightning();
window.onblur = stopLightning;
window.onfocus = goLightning;
var int1; var int2; var int3;
// this function sets the lightning interval
function goLightning() {
int1 = setInterval(function() { lightning_one(); },4000);
int2 = setInterval(function() { lightning_two(); },5000);
int3 = setInterval(function() { lightning_three(); },7000);
}
// this function clears the lightning when the window isn't focused
function stopLightning() {
window.clearInterval(int1);
window.clearInterval(int2);
window.clearInterval(int3);
}
// these three functions make the lightning flash and seem to be working fine
function lightning_one() {
$("#container #lightning1").fadeIn(250).fadeOut(250);
}
function lightning_two() {
$("#container #lightning2").fadeIn(250).fadeOut(250);
}
function lightning_three() {
$("#container #lightning3").fadeIn(250).fadeOut(250);
}
});
これが機能しない理由がわかりません。stopLightning() が間隔をクリアしていないか、window.onblur が機能していないようです。とにかく、フィードバックは役に立ちます。ありがとう!