javascript - 更有效的数字比较

Question

我有一个数组，它是我正在开发的一个小型 JS 游戏的一部分，我需要检查(尽可能经常地)数组中的每个元素是否都没有离开“舞台”或“ Playground ”，这样我就可以删除它们并保存脚本加载

我编写了以下代码，想知道是否有人知道一种更快/更有效的计算方法。每 50 毫秒运行一次(它处理运动)。

其中 bots[i][1] 是 X 方向的运动，bots[i][2] 是 Y 方向的运动(互斥)。

for (var i in bots) {
    var left = parseInt($("#" + i).css("left"));
    var top = parseInt($("#" + i).css("top"));
    var nextleft = left + bots[i][1];
    var nexttop = top + bots[i][2];
    if(bots[i][1]>0&&nextleft>=PLAYGROUND_WIDTH) { remove_bot(i); }
    else if(bots[i][1]<0&&nextleft<=-GRID_SIZE) { remove_bot(i); }
    else if(bots[i][2]>0&&nexttop>=PLAYGROUND_HEIGHT) { remove_bot(i); }
    else if(bots[i][2]<0&&nexttop<=-GRID_SIZE) { remove_bot(i); }
    else {
        //alert(nextleft + ":" + nexttop);
        $("#" + i).css("left", ""+(nextleft)+"px");
        $("#" + i).css("top", ""+(nexttop)+"px");
    }
}

在类似的注释中，remove_bot(i);函数如下，是否正确(我无法拼接，因为它会更改数组中所有元素的 ID。

function remove_bot(i) {
    $("#" + i).remove();
    bots[i] = false;
}

非常感谢您提供的任何建议!

Answer 1

1. 缓存 $("#"+ i) 到一个变量中；每次执行此操作时，都会创建一个新的 jQuery 对象。

   var self = $('#' + i);
   var left = parseInt(self.css("left"));
   var top = parseInt(self.css("top"));
   

2. 在变量中缓存 bots[i]:

   var current = bots[i];
   var nextleft = left + current[1];
   var nexttop = top + current[2];
   

3. 在机器人表示中存储(缓存)DOM 元素的 jQuery 对象。目前它每 50 毫秒创建一次。

   我的意思是，对于循环的每次迭代，您都在执行 $('#' + i)。每次调用它时，jQuery 都会构建 DOM 元素的 jQuery 对象。与 JS 的其他方面相比，这远是微不足道的。 DOM 遍历/操作是迄今为止 JavaScript 中最慢的领域。

   由于 $('#' + i) 的结果对于每个机器人都不会改变，为什么不将结果存储在机器人中呢？这样 $('#' + i) 就会执行一次，而不是每 50 毫秒执行一次。

   在下面的示例中，我将此引用存储在我的 Bot 对象的 element 属性中，但您可以将它添加到您的机器人中(即在 bots[i][3] 中)

4. 存储(缓存)表示机器人的 DOM 元素在机器人表示中的位置，因此不必一直计算 CSS 位置。

附带说明，for (.. in ..) 应该严格用于遍历对象，而不是数组。应该使用 for (..;..;..)

迭代数组

变量在 JavaScript 中非常便宜；虐待他们。

这是我选择的一个实现，它结合了我提出的建议:

function Bot (x, y, movementX, movementY, playground) {
    this.x = x;
    this.y = y;
    this.element = $('<div class="bot"/>').appendTo(playground);
    this.movementX = movementX;
    this.movementY = movementY;
};

Bot.prototype.update = function () {
    this.x += this.movementX,
    this.y += this.movementY;

    if (this.movementX > 0 && this.x >= PLAYGROUP_WIDTH ||
        this.movementX < 0 && this.x <= -GRID_SIZE ||
        this.movementY > 0 && this.y >= PLAYGROUND_HEIGHT ||
        this.movementY < 0 && this.y <= -GRIDSIZE) {
        this.remove();
    } else {
        this.element.css({
            left: this.x,
            right: this.y
        });
    };
};

Bot.prototype.remove = function () {
    this.element.remove();
    // other stuff?
};

var playground = $('#playground');
var bots = [new Bot(0, 0, 1, 1, playground), new Bot(0, 0, 5, -5, playground), new Bot(10, 10, 10, -10, playground)];

setInterval(function () {
    var i = bots.length;

    while (i--) {
        bots[i].update();
    };
}, 50);