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＆amp; 3或4＆amp; 2或4,3＆amp; 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>

Jquery函数同时显示setInterval的不同警报

3 个答案: