Question

我正在尝试为我正在制作的游戏创建一个简单的背景，并且每次循环运行时都需要我的函数的新实例。

以前我试过调试我的函数：

Sprite();
Sprite();
Sprite();
Sprite();
Sprite();
Sprite();
Sprite();

这工作并创建了该函数的几个实例。但是，当我在循环中尝试这个时，它只创建了10个相同的实例，而不是再次将其作为新实例调用。

我尝试的代码是：

for(var i = 0; i <= 10; i++){
    Sprite();
    setTimeout(Sprite, 1000);
}

function Sprite(){
    // set the sprite properties
    this.r = 30 * Math.random().toFixed(2);
    this.x = Math.floor(Math.random(Math.random()) * 5000);     //Start position
    this.y = Math.floor(Math.random(Math.random()) * 5000);     //Start position
    this.dx = Math.floor(this.x + this.r);                      //Destination position
    this.dy = Math.floor(this.y + this.r);                      //Destination position
    this.s = Math.random(Math.random()).toFixed(2)* 5000;
    this.active = true;

    //create the sprite
    var div = document.createElement('div');
    div.id = 'block';
    div.className = 'block';
    document.getElementsByTagName('body')[0].appendChild(div);

    // call the animate function
    animSprite();

    // logging output
    console.log("sprite has been created: \nthis.r = " + r + "\nthis.x = " + x + "\nthis.y = " + y + "\nthis.dx = " + dx + "\nthis.dy = " + dy + "\nthis.s = " + s + "\nanimSprite() = true");
}

上面调用以下内容来设置div的动画： //为精灵设置动画

function animSprite(n){ 
    //will need a switch case to determine which shape has which properties 
    switch(n){
        case 1:
            // animate the div
            $('.block').animate({
               top: this.y,
               right: this.x
            }, this.s);
        break;
        case 2:
            // animate the div
            $('.block').animate({
               top: this.y,
               bottom: this.x
            }, this.s);
        break;
        case 3:
            // animate the div
            $('.block').animate({
               bottom: this.y,
               right: this.x
            }, this.s);
        break;
        case 4:
            // animate the div
            $('.block').animate({
               left: this.y,
               bottom: this.x
            }, this.s);
        break;

    }
}

我哪里出错了，如何修复它就像每次循环运行时调用一个新函数一样？我更喜欢一个jQuery免费解决方案，但我愿意使用它。

Answer 1

如果我理解正确，那就是你想要实现的目标：

Demonstration

(function () {
    "use strict";

    function Sprite() {
        var ele = null;

        this.s = Math.random().toFixed(2) * 5000;
        this.r = Math.random().toFixed(2) * 30;
        this.x = Math.floor(Math.random() * 5000);
        this.y = Math.floor(Math.random() * 5000);
        this.dx = Math.floor(this.x + this.r);
        this.dy = Math.floor(this.y + this.r);
        this.active = true;

        if (typeof Sprite._div === "undefined") {
            Sprite._i = 0;
            Sprite._div = document.createElement("div");
            Sprite._div.id = "block";
            Sprite._div.className = "block";
        }

        ele = Sprite._div.cloneNode(true);
        document.body.appendChild(ele);

        animSprite.call(this, ++Sprite._i, ele);
    }

    function animSprite(n, ele) {
        var obj = null;
        switch (n % 4) {
            case 0:
                obj = {
                    top: this.y,
                    right: this.x
                };
                break;
            case 1:
                obj = {
                    top: this.y,
                    bottom: this.x
                };
                break;
            case 2:
                obj = {
                    bottom: this.y,
                    right: this.x
                };
                break;
            case 3:
                obj = {
                    left: this.y,
                    bottom: this.x
                };
                break;
        }
        $(ele).animate(obj, this.s);
    }
    for (var i = 1; i <= 50; i++) {
        setTimeout(function () {
            new Sprite();
        }, i * 1000);
    }
}());

Answer 2

这是因为setTimeout()不会停止代码执行，代码会继续执行并且会有多个覆盖的调用。我建议在for循环后执行setInterval()或者只是在控制台上打印出来。

例如，为了清晰起见使用属性：

function Sprite(name){ this.name = name; console.log(name); }

var array = ['a','b','c','d','e','f','g','h','i','j']
for(var i = 0; i < 10; i++){
    Sprite(array[i]);
}

http://jsfiddle.net/4Y5se/

循环时创建新的函数实例

2 个答案: