JS 이벤트에 대한 종료 루프

Question

내 JS와 약간 녹슬었지만 여기에 내 코드가 있습니다 ... 기본적으로 나는 마우스 오버시 이미지가 숨겨져 있으며 다른 이미지로 가득 차 있습니다 ... 페이드 아웃 src를 대체하고 다시 페이드 인하는 것입니다. 일단 모든 이미지를 가져 오면 mouseout 이벤트가 멈출 때까지 반복해서 시작하고 루프를 반복하기를 원합니다.

나는 함수 (function) 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() 함수를 정의 후, 플래그를 추가

,

cycle_images.repeatCycle = true; 

cycle_images 함수의 끝에 repeatCycle는로 마우스에

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

그리고 타임 아웃 재귀 호출을 추가 ,

cycle_images.repeatCycle = false;