Javascripts "setInterval()"与 jQuery 动画一起使用会导致函数排队

Question

发生了什么

好的，所以我在我的首页上做了一个功能，其中一些产品会彼此相邻显示、淡出、更改产品并每 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)的东西，然后在窗口已重新进入，我只是不知道该怎么做，而且我很难在谷歌上找到任何有用的东西。

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

我也尝试过使用 setTimeout() 但没有成功。

非常感谢任何有关如何避免动画队列的想法。

Answer 1

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

在应用另一个效果之前简单地检查效果队列，如果队列的长度为0则应用。

试试这个(example)；

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