jQuery / Javascript - запуск функции только один раз

Question

ОБНОВЛЕНИЕ:

Изображение большого пальца при наведении тега вызывает функцию displayImage ():

    function displayImage(index, parent){
    var images = document.getElementById(parent).getElementsByClassName("mainProductImage");

    for(var i = 0; i < images.length; i++) {
      var image = images[i];
      if (image.className != 'mainProductImage')  { continue }
      if(i == index-1) {
            // display main image
        image.style.display="block";
            // change selectedIndex of select list 
        jQuery("#mySelect").attr('selectedIndex', index-1);
        jQuery('#mySelect').trigger('change', [ i ]);           
      }
      else {
        image.style.display="none";
      }     
   }
}

Я понимаю, что не очень хорошо объяснил это :) У меня есть n уменьшенных изображений, которые при наведении меняют основное изображение товара на странице. Событие при наведении на миниатюру отправляет триггер () в список выбора на той же странице (выпадающий список с n количеством товаров, где, если имеется 3 изображения, в списке выбора есть 3 соответствующих товара).

Основываясь на предложении Патрика, я первый раз добавил это в цикл, когда каждый наводил пиктограммы:

jQuery('#mySelect').trigger('change', [ i ]); // now passing the i variable

Тогда я добавил:

$('#mySelect').change( function( event, idx ) {
if( idx === 0 ) {
   $('#fade').fadeOut('fast');
   $('#fade').fadeIn('slow');
}

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

Мне также хотелось бы, чтобы эффект затухания изображения возникал при изменении элементов товара в списке выбора, но сейчас это не работает, поскольку функция .change () не распознает [i] из массива цикла. Поэтому мне нужно решение, которое будет вызывать затухание, когда кто-то наводит курсор на миниатюры ИЛИ, когда кто-то меняет элементы списка выбора продукта.

Надеюсь, в этом есть какой-то смысл!

---

Есть ли способ запустить код jQuery внутри обычной функции javascript только один раз?

У меня есть функция fadeImage (), которая вызывается для целей перехода изображений на основе различных событий на странице. Одно из этих событий запускается из цикла for. Цикл заставляет функцию вызываться много раз, так что постепенное появление и исчезновение изображений повторяется до тех пор, пока цикл не будет завершен. Мне нужно запустить эффект затухания внутри цикла, но только один раз, поэтому я надеялся вместо того, чтобы что-то менять в области цикла, чтобы функция затухания запускалась только один раз, несмотря ни на что.

Я пытался .one () , но не повезло.

function fadeImage()
{
    // is there a way to run these two lines only once? 
    $('#fade').fadeOut('fast');
    $('#fade').fadeIn('slow');
}

Любые предложения высоко ценится. Или какие-то другие идеи, может быть, мне вообще не нужна функция для переноса кода jQuery?

Answer 1

Исходя из комментария ниже, это звучит как в цикле for, вы запускаете событие .change() несколько раз.

Если вы используете .trigger() вместо .change(), вы можете отправить «дополнительные параметры» обработчику в массиве.

Так что ваш цикл for будет выглядеть примерно так:

var myselect = $('#mySelect');

for( var i = 0; i < something.length; i++ ) {
    myselect.trigger( 'change', [ i ] );
    // ...and so on
}

тогда ваш обработчик будет настроен с параметром для принятия этого i аргумента.

$('#mySelect').change( function( event, idx ) {
    if( idx === 0 ) {
       $('#fade').fadeOut('fast');
       $('#fade').fadeIn('slow');
    }
});

---

В вашем цикле for вы можете установить переменную как флаг, указывающий, что она уже была вызвана.

var alreadyCalled = false;

for( /* whatever */ ) {
    if( !alreadyCalled ) {
        fadeImage();
        alreadyCalled = true;
    }
    // ...and so on
}

Другой вариант - ваша функция принимает параметр индекса в цикле for, который используется для определения, должен ли код выполняться.

function fadeImage( idx ) {
    if( idx === 0 ) {
       $('#fade').fadeOut('fast');
       $('#fade').fadeIn('slow');
    }
}

for( var i = 0; i < something.length; i++ ) {
    fadeImage( i );
    // ...and so on
}

Верх имеет менее изменчивый беспорядок. Недостатком является ненужные вызовы функций.