更有效的数字比较

Question

我有一个数组,它是我正在研究的小型JS游戏的一部分我需要检查(通常是合理的)数组中的每个元素都没有离开"舞台"或"游乐场",所以我可以删除它们并保存脚本加载

我编写了下面的代码,并想知道是否有人知道更快/更有效的方法来计算它.这是每50ms运行一次(它处理运动).

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. 在bot表示中存储(缓存)DOM元素的jQuery对象.目前它每50ms创建一次.

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

   由于$('#' + i)每个机器人永远不会改变,为什么不将结果存储在机器人中呢？这种方式$('#' + i)执行一次,而不是每50ms执行一次.

   在下面的示例中,我将此引用存储在element我的Bot对象的属性中,但您可以将其添加到您的bot(即in 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);