Jquery函数同时显示不同的alerts 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

setInterval 函数returns 一个引用该间隔的数字。您可以通过调用 clearInterval 并传入对前一个间隔的引用来停止间隔。

Answer 2

您需要使用 clearInterval (MDN) 函数清除间隔，以便在您单击不同的 link 时重新开始。像这样的东西可以解决问题。

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

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>

Jquery函数同时显示不同的alerts setInterval

Jquery function display different alerts at the same time setInterval

jquery

setinterval