Question

我正在阅读一本jQuery书并尝试做一个例子。在示例中闪电在屏幕上闪烁，那部分工作正常。问题是当你切换标签，然后切换回来时，闪电开始快速连续闪烁。该问题应该使用window.onblur和window.onfocus事件来修复，但它无法正常工作。谁能看到我做错了什么？

有三个隐藏的闪电图片具有不同的ID，三个不同的功能使每个闪烁。 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不起作用。无论如何，任何反馈都会有所帮助。谢谢！

Answer 1

在设置新的时间间隔之前，将stopLightning()添加到goLightning()的开头。

Answer 2

重新安排以下几行：

goLightning();
window.onblur = stopLightning;
window.onfocus = goLightning;
var int1; var int2; var int3;

改为：

var int1, int2, int3, w = window;
w.onblur = stopLightning;
w.onfocus = goLightning;
goLightning();

接下来，在w函数中使用变量window而不是stopLightning()，以确保使用对正确窗口的引用。另外，正如@Kolink所提到的，在stopLightning()函数的开头调用goLightning()以确保在焦点事件获得的情况下没有运行多个实例也没有什么坏处不止一次发射。

编辑我在设置事件后将调用移至goLightning() - 未经测试但我觉得这样会更好吗？

Javascript / jQuery似乎无法使ClearInterval工作

2 个答案: