Jquery 함수가 동시에 다른 경고를 표시합니다. setInterval

Question

이 함수는 2 초마다 특별한 값의 경고를 표시합니다.

jQuery.fn.ShowAlert = function(value){ 
    var value=value; 
     setInterval(function(){alert(value);},2000) 

} 

$("#show1").on("click", function(){ $(document).ShowAlert(4);}); 
$("#show2").on("click", function(){ $(document).ShowAlert(3);}); 
$("#show3").on("click", function(){ $(document).ShowAlert(2);}); 

     $(document).ShowAlert(4); /*by default the page start alerting the number 4*/ 

앵커를 클릭 할 때마다 페이지가 2 초마다 선택된 값의 경고를 팝업하기 시작합니다.

<a id=show1>Show value 4</a> 
<a id=show2>Show value 3</a> 
<a id=show3>Show value 2</a> 

, 내가 하나 이상의 앵커를 클릭하면, 함수가 값을 표시하는 다른 경고를 보여주고 시작하는 문제 4 & 3 또는 4 & 2 4,3 & 2 등

질문은 어떻게이 행동을 멈추게합니까? 내가 원하는 것은 앵커를 클릭하는 것 뿐이며 함수는 선택된 번호의 경고를 표시합니다. https://jsfiddle.net/vyucptve/

Answer 1

clearInterval (MDN) 기능을 사용하여 다른 링크를 클릭하면 간격을 지워야합니다. 이 같은 것이 트릭을 할 수 있습니다.

var myInterval; 
jQuery.fn.ShowAlert = function(value){ 
    var value = value; 
    if(myInterval) { 
     clearInterval(myInterval); 
     myInterval = null; 
    } 
    myInterval = setInterval(function(){alert(value);},2000) 
} 

Answer 2

setInterval 함수는 해당 간격을 참조하는 숫자를 반환합니다. clearInterval을 호출하고 이전 간격으로 참조를 전달하여 간격을 중지 할 수 있습니다.

Answer 3

이 시도 :

$(document).ready(function() { 
jQuery.fn.ShowAlert = function(value){ 
    var value=value; 

    var timerId = setInterval(function() 
    { 
     alert(value); 
     value = value-1; 
     if(value<1) { 
      clearInterval(timerId); 
     } 

    },2000) 



} 

    $(document).ShowAlert(4);  
}); 
</script> 

<a id="show1">Show value 4</a> 
<a id="show2">Show value 3</a> 
<a id="show3">Show value 2</a>