0

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

4

2 回答 2

4

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

于 2012-04-17T03:07:07.640 回答
1

重新排列以下行：

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()的开头调用 togoLightning()以确保在焦点事件被多次触发的情况下不会运行多个实例。

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

于 2012-04-17T03:15:45.400 回答