JS 事件退出循环

Question

所以我对我的 JS 有点生疏，但这是我的代码...... 基本上我有一个图像，当鼠标悬停时，它会循环显示一个充满其他图像的隐藏 div...淡出它，替换 src，然后淡入。它效果很好。但是一旦它遍历完所有图像，我希望它重新开始并继续循环遍历它们，直到 mouseout 事件停止它。

我以为我可以从函数 cycle_images($(current_image)); 中再次调用该函数，但这会导致浏览器崩溃，这是可以理解的。什么是完成此任务的好方法？

$.fn.image_cycler = function(options){
  // default configuration properties
  var defaults = {
    fade_delay:     150,
    image_duration: 1500,
    repeatCycle:    true,
  };
  var options = $.extend(defaults, options);

  this.each(function(){
    var product     = $(this);
    var image       = $('div.image>a.product_link>img', product);
    var description = $('div.image>div.description', product);
    var all_images  = $('div.all_images', product);
    var next_image  = ($(all_images).find('img[src="' + $(image).attr('src') + '"]').next('img').attr('src')) ? $(all_images).find('img[src="' + $(image).attr('src') + '"]').next('img') : $(all_images).children('img').first();;

    // mouseover
    image.fadeOut(options.fade_delay, function(){
      image.attr('src', next_image.attr('src'));
      image.fadeIn(options.fade_delay);
    });
    if (options.repeatCycle){
      var loop = function() {
        product.image_cycler();
      }
      setTimeout(loop,options.image_duration);
    }
  });
};


$(document).ready(function() {
  $('div.product').hover(function(){
    $(this).image_cycler();
  }, function(){
    $(this).image_cycler({repeatCycle: false});
  });
});

Answer 1

听起来您希望它在鼠标移开时重新循环并停止。

定义cycle_images()函数后，添加一个标志，repeatCycle，

cycle_images.repeatCycle = true;

在cycle_images函数的末尾，添加一个带超时的递归调用，

if (this.repeatCycle) {
   var f = function() {
      return cycle_images.apply(this, [$current_image]);
   }
   setTimeout(f,50);
}

然后在mouseout中，

cycle_images.repeatCycle = false;