Question

我做了一些搜索，我甚至不确定我想做的是好的javascript练习。我有一个while循环，如果点击一个停止按钮，我想提前退出。

$( "#go" ).click(function() {
  var gotime = 1;
  while (gotime < 100) {
    for(i = 0; i < 2; i++){
      var divName = "floatName" + i;
      console.log(divName);
      $( "#" + divName ).animate({
        left: Math.random()*500 + "px",
        top: Math.random()*500 + "px"
      }, 500, function() {
        // Animation complete.
      });
    };

    gotime += 1;

    $( "stop" ).click(function() {
      gotime = 101;
    });
    };
});

但这不起作用。我最初有一个无限循环（没有增加gotime）。

http://jsfiddle.net/cvoxe465/

Answer 1

实际上如果你等了一段时间就会停止。问题是您经常执行动画，$.animate必须对其进行排队。有$.stop方法可以让您停止当前正在运行的动画。 DEMO

$( "#stop" ).click(function() {
  gotime = 101;
  $('#floatName0, #floatName1').stop(true, true);
});

修改

请注意，在您提供的代码中存在错误。而是$("stop")，您需要使用$("#stop")。

Answer 2

animate不会阻止循环。动画堆叠然后执行，但循环结束很久。这是有用的东西：

var loopAllowed = false; $('#go').click(function(){ loopAllowed = true; var max = 2; var loop = function(){ for(var i = 0; i < max; i++){ var divName = "floatName" + i; $( "#" + divName ).animate({ left: Math.random()*500 + "px", top: Math.random()*500 + "px" }, 500, i === max - 1 && loopAllowed ? loop : undefined); } }; loop(); }); $('#stop').click(function(){ loopAllowed = false; });

JSFiddle。我们在动画结束后手动调用loop函数（将其作为回调函数传递）。如果loopAllowed为false（例如，点击#stop设置为false），则不会将其作为回调函数传递，并且循环停止。

Answer 3

您可以使用setInterval：

JS：

var interval;
$("#go").click(function () {
    var gotime = 1;
    interval = setInterval(function () {
        for (i = 0; i < 2; i++) {
            var divName = "floatName" + i;
            console.log(divName);
            $("#" + divName).css({
                left: Math.random() * 500 + "px",
                top: Math.random() * 500 + "px"
            });
        };
        gotime += 1;
        if (gotime > 100) {
            clearInterval(interval);
        }
    }, 500)
});
$("#stop").on('click', function () {
    clearInterval(interval);
});

的CSS：

#randomFloat {
    color: red;
}
#floatName1, #floatName0 {
    transition : 0.5s left, 0.5s top;
}

Fiddle

javascript：如何通过单击按钮退出循环

3 个答案: