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

您以每秒10次（setInterval）的速度调用该函数。最终，maxcount变量将降至0以下，导致else条件执行。

您应该将间隔调用存储在变量中，并在else处使用clearInterval，以便该函数仅在else之后运行一次：

//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;）作为前缀，也可以将其删除。

Answer 2

您让maxcount降至零以下但仍然每隔100毫秒调用您的函数（由于您的setInterval）。

所以你应该最终通过这样做来清除这个间隔：

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

/* later */
clearInterval(intervalID);

为什么在if / else语句中循环遍历'else'？

2 个答案: