0

我有个问题。如果某种变量为真，我想每秒检查大约 50 次。如果是真的，我们需要做一个 1 秒的背景转换。我是这样设计的：

setInterval(
        function(){


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

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

4

1 回答 1

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/

但同样，这种投票概念并不是最好的方法。您应该从更改变量的代码中触发动画。

于 2013-06-28T21:18:28.203 回答