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)的内容，然后在重新输入窗口时重新初始化定时器，我只是不知道该怎么做，而且我很难在google上找到任何有用的东西。

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

我也尝试过使用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);
});

与jQuery动画一起使用的Javascript“setInterval（）”导致函数队列化

发生了什么

我尝试了什么

1 个答案: