なぜif/else文の 'else'をループしていますか？

Question

if/else文の末尾にalert(rand)を有効にすると、実行時に常にif/else文のelse節をループします。それはおそらく簡単な修正ですが、わかりません。私はそれが開発の初期段階で働いていましたが、今はそれを理解できないようです。

私は以下のコードを投稿しますが、おそらく私のjsfiddleを見れば分かります。http://jsfiddle.net/zAPsY/7/ありがとう。

$(document).ready(function(){ 
//You can edit the following file paths to change images in selection 
var img1 = '<img src="images/luke.jpg">'; 
var img2 = '<img src="images/luke.jpg">'; 
var img3 = '<img src="images/luke.jpg">'; 
var img4 = '<img src="images/luke.jpg">'; 
var img5 = '<img src="images/luke.jpg">'; 
var img6 = '<img src="images/luke.jpg">'; 
var all = img1 + img2 + img3 + img4 + img5 + img6; 

//Rotation 
var speed = 0.00; 
var radius = 80; 
var count = 0; 

$("#run").bind("click",runButtonClick); 

function rotate() 
{ 
    var centerx = $(document).width()/2; 
    var centery = $(document).height()/2;   
    var num_items = $("#container > img").length;  
    $("#container > img").each(function(){ 
     var angle = count * (Math.PI/180);    
     var newx = centerx + Math.cos(angle)*radius - $(this).width()/2;     
     var newy = centery + Math.sin(angle)*radius - $(this).height()/2;    
     $(this).css("left",newx+"px").css("top",newy+"px");    
     count += 360/num_items + speed; 
    }); 
} 
setInterval(rotate,100/1000); 

//Append elements to container 
$("#appendall").click(function(){$('#container').append(all);}); 
$('#append').children().eq(2).click(function(){$('#container').append(img1);}); 
$('#append').children().eq(3).click(function(){$('#container').append(img2);}); 
$('#append').children().eq(4).click(function(){$('#container').append(img3);}); 
$('#append').children().eq(5).click(function(){$('#container').append(img4);}); 
$('#append').children().eq(6).click(function(){$('#container').append(img5);}); 
$('#append').children().eq(7).click(function(){$('#container').append(img6);}); 

//Refresh page 
$("#reset").click(function(){location.reload();}); 

//IF speed is greater than 0 - ELSE add animation to div element 
function runButtonClick() { 
    var maxcount = 0.40; 
    var incdec = 0.01; 
    setInterval(function(){counter();}, 100);  
    counter() 
    speed; 
    function counter() 
    { 
     if (maxcount >= 0.00) 
      { 
       maxcount = maxcount - incdec; 
       speed = speed + incdec; 
       //alert(speed) 
       //alert(maxcount) 
      }    
     else if (maxcount <= 0.00) 
      { 
       speed = 0.00; 
       //Find amount of div elements and add 1 
       var brewees = $('#container').children().length +=1; 
       //get a random number 
       var rand = (Math.floor(Math.random()*brewees)); 
       var ap = '20px'; 
       var ab = '#ddd'; 
       var ad = 1000; 
       //match random number corrosponding child in div 
       $('#container').children().eq(parseFloat(rand)) 
       .animate({padding: ap, background : ab}, {duration:ad}); 
       alert(rand); 
      } 
    } 
} 

}）;

Answer 1

あなたはmaxcountをゼロ以下にしますが、あなたの機能は100msごとに呼び出されます（setIntervalのため）。

だから、あなたが行うことで、最終的にその間隔をクリアする必要があります。

/* first */ 
var intervalID = setInterval(function(){counter();}, 100); 

/* later */ 
clearInterval(intervalID); 

Answer 2

あなたは、毎秒10回の割合でこの関数を呼び出しています（setInterval）。最終的には、maxcount変数が0より低くなり、else条件が実行されます。

機能はelse後に一度だけ実行されるようにあなたは、変数に間隔コールを保存、およびで他clearIntervalを使用する必要があります。

//Store a reference to the interval 
var interval = setInterval(function(){counter();}, 100); 
... 
function counter(){ 
    ... 
    else if(..){ 
     ... 
     clearInterval(interval); //Clear the previously defined interval 
    } 
... 

別のノートを：コードでは、speed;は一切使用していません。接頭辞はvar（var speed;）か、削除してください。