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]从循环数组.所以我需要一个解决方案,当一个人在缩略图上徘徊或者当一个人改变产品选择列表项时会触发淡入淡出.

我希望这有点道理!

---

有没有办法只在常规javascript函数中运行一次jQuery代码？

我有一个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(),则可以将"额外参数"发送到Array中的处理程序.

所以你的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
}

上行的混乱变化较小.下行是不必要的函数调用.