Question

我有一个名为TweenManager的Javascript对象，它包含一个Tween对象数组。 TweenManager应该在'tweens'数组中的每个补间上调用step（）方法，并且所有补间应该同时运行。

然而，实际发生的是TweenManager一次只运行一个补间，并且在前一个补间完成之前不会启动下一个补间。

这是补间管理器的代码

可能更有意义

//Manage all tweens
function TweenManager(){

    this.tweens = new Array();
    this.timer;

    this.start = function(){
        this.timer = setInterval(this.run, 1, this);
    }

    // Loop through all tweens and call the step method
    this.run = function(myself){

        console.log(myself.tweens.length);

        // stop the interval if the tween array is empty
        if(myself.tweens.length == 0){
            clearInterval(myself.timer)
        }

        // loop through all tweens and call the step() method
            // !! Here's there the problem appears to be
        for(i = 0; i < myself.tweens.length; i++){

            thisTween = myself.tweens[i]        
            console.log(thisTween.element.attr('id'));  
            thisTween.step() // if I remove this, the line above logs the id's as expected

            // clean up if the tween is complete
            if(thisTween.t == thisTween.d){
                myself.tweens.splice(i, 1);
            }

        }

    }


    this.addTween = function(b,c,d,element,suffix, decimal){
        this.tweens.push( new Tween(b,c,d,element,suffix, decimal) )
    }

}

问题似乎出现在for循环中。我预感到这可能与传递this中的setInterval有关，虽然这只是一种预感，我不明白问题是什么。我对变量范围和诸如此类的东西感到困惑。

这是Tween对象（Yup，剽窃Robert Penner）

// Tween a number, add a suffix and insert it into an element
function Tween(b, c, d, element, suffix, decimal){

    this.t = 0;
    this.c = c;
    this.d = d;
    this.b = b;
    this.element = element;
    this.suffix = suffix;

    this.step = function(){

        if(this.t != this.d){

            this.t += 1 
            var flip = 1
            if (this.c < 0) {
                flip *= -1
                this.c *= -1
            }
            i = flip * (-Math.exp(-Math.log(this.c)/this.d * (this.t-this.d)) + this.c + 1) + this.b

            if(!decimal){
                this.element.html(Math.round(i) + this.suffix)
            }else{
                output = (Math.round(i * 10) / 10 + this.suffix)
                formattedOutput = ( output - Math.round(output) == 0 ) ? output + ".0" : output;
                this.element.html(formattedOutput)
            }

        }   
    }

}

这是实施

tweenManager = new TweenManager();
tweenManager.addTween(0,80,300, $("#el1"), "&deg;", false)
tweenManager.addTween(0,60,400, $("#el2"), "&#8217;", false)
tweenManager.addTween(0,12.5,300, $("#el3"), "", true)
tweenManager.start()

与往常一样，非常感谢任何帮助，提示或推动正确的方向。

Answer 1

我认为问题在于你试图将setInterval用作某种fork（）函数，这意味着你应该将它从它放在步骤本身的位置移动，以便你调用：

setInterval(thisTween.step, 1, ...

这就是为什么你可以让你的补间运行假'并行'。

然而我真正想要的是新的HTML5 Web Workers功能;我认为这就是这种活动。

为什么这个'for'循环不起作用？

1 个答案: