循环对象方法答案

【问题标题】：Loop object method循环对象方法
【发布时间】：2014-05-26 21:04:34
【问题描述】：

我正在尝试使用循环同时调用对象方法。我会用一组同时移动的敌人创建一个游戏。

我创建了一个对象“战士”

    function Warrior(x, y) {

    // Coordinates x, y 

    this.x = x;
    this.y = y;

    this.character = $('<div class="enemy"></div>');

    // Inserting the div inside #map
    this.character.appendTo('#map'); 


    // assigning x and y parameters

    this.character.css({        

        marginLeft: x + 'px',
        marginTop: y + 'px'

    });

    // walk method that move the div

    this.walk = function() {

        // Moving div 10px to the right
        this.character.css('left', "+=10");

    }

    }

    var enemies = new Array();
    enemies[0] = new Warrior(0, 0);
    enemies[1] = new Warrior(10, 20);
    enemies[2] = new Warrior(60, 80);

    for(var i=0;i<enemies.length;i++) {
        setInterval(function(){enemies[i].walk()}, 1000);
    }

我创建了一个数组“敌人”

我尝试同时调用 walk() 方法

但是什么也没发生。我希望 div 可以同时移动！

谢谢！

【问题讨论】：

你在任何敌人身上测试过walk()，它会移动吗？如果不是，则问题不在循环中。

标签： javascript arrays loops object methods

【解决方案1】：

基于this问题

您可能希望将参数按值传递给setInterval：

for(var i=0;i<enemies.length;i++) {
    setInterval(
        function(index){   //<-- accept parameter here
            enemies[index].walk();
        }, 1000, i);       //<-- pass i here
}

如果不传递参数，x 变量会在循环运行时发生变化，因此所有函数都将被调用为 x = 2（因为您的数组中有 3 个元素）

【讨论】：

【解决方案2】：

你有两个主要问题：

CSS 不允许像 javascript 那样进行编程修改。您在 javascript 中修改值，然后在 CSS 中设置它们：

this.walk = function() {
    var current = parseInt(this.character.css('left')),
        stepped = current + 10;
    this.character.css('left', stepped);
}

您的循环在 var i 上创建了一个闭包，该闭包仅声明一次，因此函数将共享相同的值。您可以让函数接受一个参数，并在 setInterval 调用中提供它：
- setInterval(function(index) { /* ... */}, 1000, i);
或者你可以把循环放在区间函数中：
```
setInterval(function() {
    for (var i = 0; i < enemies.length; i++) {
         enemies[i].walk();
    }
});
```

您可能还想重新考虑您的 walk 函数是否应该直接修改 CSS。您已经忘记了此代码中的 x 和 y 坐标属性。也许你应该有一个修改这些坐标的walk 方法，以及一个根据当前坐标更新精灵位置的draw 函数。

【讨论】：