Javascript/jQuery似乎无法让ClearInterval工作

Javascript/jQuery can't seem to get ClearInterval to work

本文关键字：ClearInterval 工作 jQuery Javascript      更新时间：2023-09-26

我正在阅读一本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 不起作用。无论如何，任何反馈都会有所帮助。谢谢！

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

重新排列以下行：

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() - 未经测试，但我认为这样会更好？

相关文章：