Question

我有问题。如果某种变量是真的，我想每秒检查大约50次。如果确实如此，我们需要进行1秒的背景转换。我这样做了：

setInterval(
        function(){


            if(var) {
                   $('.side-bar').animate({
                        backgroundColor: "#fff"
                        }, 1000);
            }
            else { 
           $('.side-bar').animate({
                        backgroundColor: "#000"
                        }, 1000);
            }   
            },20);

问题是如果var为真，由于某种原因，动画会卡住，并且它不能再改变了。如果我们使间隔时间大于动画时间（例如间隔1001和动画1000），它确实有效。当间隔时间<动画时间，它不起作用。谁知道解决方案？

Answer 1

每次运行函数时，它都会尝试启动两个动画中的一个或另一个。 jQuery将后续动画调用排队。所以在你的函数运行50次后一秒钟之后，你排队了50个动画，第一个就完成了。

我真的不建议对变量进行那种轮询，最好直接从任何代码设置变量触发动画，但是为了解决当前问题你可以检查当前是否有动画正在进行中，如果没有这样做：

setInterval(function () {
    var $sidebar = $('.side-bar');
    if ($sidebar.is(':animated')) return;
    if (condition) {
        $sidebar.animate({
            backgroundColor: "#fff"
        }, 1000);
    } else {
        $sidebar.animate({
            backgroundColor: "#000"
        }, 1000);
    }
}, 20);

演示：http://jsfiddle.net/yXWPD/

但是即便如此，你仍然会不断重新制作同样的动画，你不会一次排队多个动画。除非条件变量实际发生了变化，否则无需排队另一个动画：

var condition = false; // your condition var, that is set true by some
                       // other code somewhere

var prevCondition,
    $sidebar = $('.side-bar');
setInterval(function () {
    if (prevCondition != condition && !$sidebar.is(':animated')) {
        prevCondition = condition;
        $sidebar.animate({
            backgroundColor: condition ? "#fff" : "#000"
        }, 1000);
    }
}, 20);

演示：http://jsfiddle.net/yXWPD/2/

但同样，这种民意调查概念不是最佳方式。您应该从更改变量的代码中触发动画。

Setinterval动画

1 个答案: