Javascript / jQuery似乎无法使ClearInterval正常工作

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

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

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

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

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