내 jquery 플러그인에서 Interval 함수를 중지하는 방법

Question

div 자동 스크롤을 만들기 위해 jquery 플러그인을 작성했습니다. setInterval 함수를 사용하여 잠시 div를 멈추고 스크롤을 계속 사용했습니다. 여기가 잘 작동 코드

(function($){ 
"use strict"; 
function scrolltotop(obj,height,speed){ 
var ch=parseInt($(obj).css("margin-top"))+29; 
    $(obj).parent().find(".moving").remove(); 
    $(obj).after($(obj).clone().addClass("copy")); 
    $(obj).addClass("moving").removeClass("copy").animate({ 
     "margin-top":-27 
    },speed); 
    loop=setInterval(function(){ 
     ch+=27; 
     if(ch < height+27){ 
      $(obj).animate({ 
       "margin-top":-ch 
      },speed,function(){ 
      loop; 
      })  
     }else{ 
      clearInterval(loop); 
      scrolltotop($(obj).next(".copy"),height,speed); 
     } 
    },4000) 
}    
$.fn.extend({ 
    autoscroll: function(options) { 
     var defaults = { 
      speed: 1000, 
      scroller : '#scroller', 
      scroller_container : '#scroller_container' 
     }  
     var options = $.extend(defaults, options); 
     var height=$(options.scroller).height(); 
     var stop=stopscroll(); 
     //console.log(height) 

     scrolltotop(options.scroller,height,options.speed); 
    }, 
}); 
}(jQuery)); 
$("#list2").autoscroll({scroller:"#list2",scroller_container:"#container_2"}); 

이지만, idont 내가 플러그인을 초기화하기 후 DIV 정지 스크롤을 만드는 방법을 알고.

Answer 1

내가 끝까지 도달 할 때까지 줄 단위로 4 라인을 기다리는 div 스크롤 라인을 이동하려는 문제를 이해한다면.

나는 당신이 http://jsfiddle.net/jCw3y/ 당신이 당신의 플러그인에서 사용하려면 코드를 적용 할 수있을 여기 작업 예제를 볼 수 있습니다 scrolltotop 기능을

function scrolltotop(obj,height,speed){ 

    var ch = 0;   
    var loop = setInterval(function(){ 

     ch+=27; 
     $('#container_2').animate({ 
      scrollTop: ch 
     }, speed); 

     if(ch >= height){ 
      console.log('Out of loop');  
      clearInterval(loop); 
     } 

    },4000);  
} 

을 단순화.

(당신은 "엄격한 사용"사용하고 있습니다. 자바 스크립트 변수 항상. VAR 루프, var에 채널의 e.t.c 선언하는 것을 잊지 마십시오)

수동으로 중지하려면 당신이 intervalId을 저장하고 당신이 원하는 때 위해 clearInterval을 호출합니다. 다음 예를 확인하십시오 : http://jsfiddle.net/ccR4t/

그리고 마지막으로 pure jquery를 사용한 또 다른 예입니다. 애니메이션 및 정지 기능을 사용하여 모든 것을 제어합니다.

(function ($) { 
    "use strict"; 

    function scrolltotop($container, options) { 
     $container.animate({ 
      scrollTop: options.scrollerHeight 
     }, options.speed, function() { 
      console.log('Animation completed'); 
     }); 
    } 

    $.fn.extend({ 
     autoscroll: function (options) { 

      var $me = this; 
      var defaults = { 
       speed: 1000, 
       scroller_container: '#scroller_container', 
       scroller: '#list2' 
      } 
      var options = $.extend(defaults, options); 
      options.scrollerHeight = $(options.scroller).height(); 

      scrolltotop($me, options); 
     }, 
    }); 
}(jQuery)); 

$("#container_2").autoscroll({ 
    scroller: '#list2', 
    speed: 10000 
}); 

// stop scroll after 4 sec 
setTimeout(function() { 
    $('#container_2').stop(); 
    alert('scroll manually stopped') 
}, 4000); 

근무 예 : http://jsfiddle.net/c8Ns8/