Question

我正在制作速度很重要的游戏。所以我试图找到最快的方法来检查屏幕上是否有某个图像。

var myimages = ["Afbeeldingen/ballonBlauw.png",
            "Afbeeldingen/ballonGeel.png",
            "Afbeeldingen/ballonOranje.png",
            "Afbeeldingen/ballonRoos.png",
            "Afbeeldingen/balloonGroen.png",
            "Afbeeldingen/ballonRood.png"];

这些是我的图像，在添加新元素时，它会随机选择其中一个并将它们设置为背景图像。我还有一个数组，它跟踪页面上每个图像的数量：

var numberonscreen = [0,
                  0,
                  0,
                  0,
                  0,
                  0];

每次添加元素时，它都会在上面的数组中为正确的索引添加+1。

当单击某个元素时，检查它所保留的图像并将计数器设置为正确的索引-1的最佳方法是什么？我应该检查背景图像并将其与每个可能的图像进行比较，还是有更快的方法？

由于

Answer 1

您可以使用图像的索引添加自定义属性，然后，当您需要检查它是哪个图像时，获取该属性的值，然后减去数组中正确索引的计数。这样你根本不需要枚举任何数组。

类似的东西：

$('.anImage').on('click', function() {
  var index = $(this).attr('theArrayIndexOfTheImage');
  numberonscreen[index]--;
});

Answer 2

一种可能性：

function handler() {
    ++numberonscreen[myimages.indexOf(this.getAttribute('src')];
}

使用原生indexOf应该比您制作的循环更快。

但我建议改用对象：

var numberonscreen = {};
for(var i=0, l=myimages.length; i<l; ++i) // Initialize
    numberonscreen[myimages[i]] = 0;
function handler() {
    ++numberonscreen[this.getAttribute('src')];
}

这样就不需要找到位置，因为你使用图像作为属性。

Jquery检查页面上是否存在项目的最快方法

2 个答案: