Jquery самый быстрый способ проверить, существует ли элемент на странице

Question

Jquery самый быстрый способ проверить, существует ли элемент на странице

0

Я делаю игру, где важна скорость. Поэтому я пытаюсь найти самый быстрый способ проверить, отображается ли определенное изображение на экране.

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? Должен ли я просто проверить фоновое изображение и сравнить его со всеми возможными, или есть более быстрый способ?

благодаря

user3117628 12 май 2014, в 17:35

Источник

0

Если важна скорость, я предлагаю использовать vanilla-js вместо jQuery.
Oriol 12 май 2014, в 15:34
1

Вы можете добавить пользовательский атрибут с индексом изображения, а затем, когда вам нужно проверить, какое это изображение, получить значение этого атрибута и затем вычесть счетчик для правильного индекса в массиве.
Sani Singh Huttunen 12 май 2014, в 15:35

Теги:

jquery

2 ответа

1

Одна возможность:

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

Использование native indexOf должно быть быстрее, чем сделанный вами цикл.

Но я предлагаю вместо этого использовать объект:

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

Таким образом, нет необходимости находить позицию, потому что вы используете изображение как свойство.

Oriol 12 май 2014, в 14:19

0

Хотя, конечно, это возможно, indexOf перечисляет myImages . Нет нужды перечислять, если вы хотите максимально быстрое выполнение. Ваше второе (и рекомендуемое решение) хорошо.
Sani Singh Huttunen 12 май 2014, в 15:49

Ещё вопросы

Если важна скорость, я предлагаю использовать vanilla-js вместо jQuery.
Вы можете добавить пользовательский атрибут с индексом изображения, а затем, когда вам нужно проверить, какое это изображение, получить значение этого атрибута и затем вычесть счетчик для правильного индекса в массиве.
Хотя, конечно, это возможно, indexOf перечисляет myImages . Нет нужды перечислять, если вы хотите максимально быстрое выполнение. Ваше второе (и рекомендуемое решение) хорошо.

Sani Singh Huttunen · Accepted Answer · 2014-05-12T13-24-00.000Z

Вы можете добавить настраиваемый атрибут с индексом изображения, а затем, когда вам нужно проверить, какое изображение оно, получите значение этого атрибута, а затем вычтите счетчик для правильного индекса в массиве. Таким образом, вам не нужно перечислять какой-либо массив вообще.

Что-то вроде:

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