Javascripts"；setInterval（）；与jQuery动画一起使用会导致函数队列 发生了什么事

好的，我在头版上做了一个功能，在这个功能中，一些产品彼此相隔，淡出，更换产品，每5秒钟淡出一次。代码如下所示：

var t;

$(document).ready(function(){
    // Some pre-animation stuff, like loading the products etc.

    // Initialize animation timer
    t = setInterval("changeProducts();", 5000);
};

function changeProducts() {
    // Fade out
    $("#anfBox").fadeTo(200, 0.01, function() {

    // Change products

    // Fade back in
    $("#anfBox").fadeTo(200, 1);
    });
}

这一切看起来都很好，运行正常，但当我转到另一个窗口一分钟后返回时，

changeProducts

函数会快速执行几次（取决于我离开的时间）。产品淡出，更改再次淡入，然后立即重复，应该有~5秒的延迟

我试过的 所以我想我需要做的是当焦点从窗口丢失时使用像clearInterval（t）这样的东西，然后在重新进入窗口时重新初始化计时器，我只是不知道怎么做，我很难在google上找到任何有用的东西

我在想，也许有一种方法可以运行动画，即使窗口没有聚焦，也可以避免函数队列

我也尝试过使用

setTimeout（）

，但没有成功

---

任何关于如何避免动画队列的想法都是非常值得赞赏的。

随着最新的浏览器更新，许多浏览器现在在当前页面或选项卡未激活时停止执行代码。当您返回该选项卡/窗口时，它将执行所有排队的操作，并且您会看到在每个操作之后都会出现一系列效果

只需在应用另一个效果之前检查效果队列，若队列长度为0，则应用

试试这个（）

---

这很好用，谢谢。：）jsfiddle链接也是一个很好的答案。

var t;

function changeProducts() {
    // Fade out
    var $anfBox = $("#anfBox"),
        queue = $anfBox.queue('fx');
    if (queue && queue.length === 0) {
        $anfBox.fadeTo(200, 0.01, function() {
            // Change products
            // Fade back in
            $anfBox.fadeTo(200, 1);
        });
    }
}

$(document).ready(function() {
    // Some pre-animation stuff, like loading the products etc.
    // Initialize animation timer
    t = setInterval(changeProducts, 5000);
});