Question

我使用JS通过打开和关闭它们来动画两个图像。我有一个初始图像，当动画打开时，它出现在屏幕上并保持打开状态。然后将具有较高z值的第二个图像设置为在与第一个图像相同的位置每1秒打开和关闭一次，因此看起来好像这两个图像是交替的。

我使用window.setInterval使第二个图像闪烁，但是当我需要关闭动画时（我从屏幕上删除两个图像），我的window.clearInterval不是＆＃34;工作＆＃34;第一张图片将消失，但第二张图片每秒都会熄灭。

代码：

function notebookNotification(setting)
{
    $("#lightNotificationContainer").show();
    var notificationAnimation = window.setInterval('$("#darkNotificationContainer").toggle()', 1000);
    if(setting == 0)
    {
        window.clearInterval(notificationAnimation);
        $("#lightNotificationContainer").hide();
        $("#darkNotificationContainer").hide();
    }
}

任何人都明白为什么它不起作用？

Answer 1

在各行之间阅读，我认为你所说的是：

执行notebookNotification(1);并开始动画
您执行notebookNotification(0);，动画不停止。

我的猜测是你希望notebookNotification(0)禁用闪烁。

为了做到这一点，你需要大大改变这个功能。您需要将来自intervalID的{{1}}存储在一个存在于此函数范围之外的变量中，并且可以在后续调用此函数时用于setInterval。

例如：

clearInterval

Answer 2

在这里，试试这个：

http://jsfiddle.net/WGxmy/

将间隔保存到全局变量 - 而不是函数内部 - 可让您稍后将其清除。

Answer 3

var keepflashing = true;
var isShowing = true;
function notebookNotification()
{
    if(!isShowing)
        $("#lightNotificationContainer").show();
    else
        $("#lightNotificationContainer").show();

    isShowing = !isShowing;

    if(keepflashing)
      setTimeout( function(){  notebookNotification(setting);  },100);
    else
    {
        $("#lightNotificationContainer").hide();
        $("#darkNotificationContainer").hide();
    }
}

Answer 4

也许你可以避免一般性地调用 clearInterval（）吗？

function notebookNotification(setting)
{
    if(setting == 0)
    {
        $("#lightNotificationContainer").hide();
        $("#darkNotificationContainer").hide();
    }
    else
    {
        $("#lightNotificationContainer").show();
        window.setInterval('$("#darkNotificationContainer").toggle()', 1000);
    }
}

window.clearInterval不起作用？

4 个答案: