무한 루프가 발생하는 이유는 무엇입니까?

Question

컨테이너의 크기를 조정하고 너비와 높이를 설정하려고합니다. 그것은 코드의 모든 부분은 아니지만 무한 루프가 나타나면 $ .fn.imageScale.resizeContainer 함수가 작동하지 않습니다. 이유를 찾을 수 없습니까?

$(window).load(function(){  
    $('#scalable_images').imageScale(); 
}); 

(function($){ 
$.fn.imageScale = function(){ 

    thisCallback = $(this); // for usage in inner other function 
    images = $(this).find('img'); // images 
    imagesHolder = $(this).find('.item'); // image holder 
    frameSize = 34; // frame size 
    sizingCof = 1.5; // image size cofficient to scale, 1.5 = 150% normal state 
    speed = 600; // speed in ms 

    $.fn.imageScale.resizeContainer(); 
    $.fn.imageScale.resize(); 
    OldContainerW = imagesHolder.width(); 
    OldOffsetL = offsetL; 

    $(window).bind('resize', function(){ 
     $.fn.imageScale.resizeContainer(); 
     $.fn.imageScale.resize(); 
     OldContainerW = imagesHolder.width(); 
     OldOffsetL = offsetL; 
    }); 
} 

$.fn.imageScale.resizeContainer = function(){ 

    var windowW = $(window).width(); 
    var windowH = $(window).height(); 
    var scaleImgH = windowH - frameSize * 2; 
    var scaleImgW = windowW - frameSize * 2; 

    $(this).height(scaleImgH); 
    $(this).width(scaleImgW); 
} 
})(jQuery); 

Answer 1

당신은 resize 이벤트에 resizeContainer 기능을 결합하고, resizeContainer 기능에 당신은 당신이 이미를 만들 경우 무한히에게 다시

Answer 2

을 resizeContainer을 실행하는, 다시 크기 조정 이벤트를 트리거, 컨테이너의 크기를 조정하기 때문에 함수를 사용하여 크기 조정 이벤트를 트리거 한 다음 함수 내에 바인딩하는 이유

IF $ ('#scalable_images') .imageScale(); 그것은

$(window).bind('resize', function(){ 

     $.fn.imageScale.resizeContainer(); 
     $.fn.imageScale.resize(); 
      OldContainerW = imagesHolder.width(); 
     OldOffsetL = offsetL; 
    }); 

아래의 코드에 의해 다음과 같은 코드를 교체하고

$.fn.imageScale.resizeContainer(); 
    OldContainerW = imagesHolder.width(); 
    OldOffsetL = offsetL;