jQuery：不会使浏览器崩溃的无限循环答案

【问题标题】：jQuery: Infinite loop that doesn't crash the browserjQuery：不会使浏览器崩溃的无限循环
【发布时间】：2012-10-22 22:07:40
【问题描述】：

我想知道是否有可能创建一个不会使浏览器崩溃的无限循环

这是我目前所拥有的（这显然会使浏览器崩溃）：

    var i = 0;
    while (i < 1){
        $('.block').each(function(index) {  
            $(this).css('left', $(this).position().left - 10)
            if (($(this).position().left) < ($(window).width() * 0.4)) {
              $(this).html('<p>Test 1</p>');
              $(this).animate({
              width: "500px",
              height: "500px",
              }, 500 );
            }else if (($(this).position().left) < ($(window).width() * 0.2)) {
              $(this).html('<p>Test 1</p>');
              $(this).animate({
              width: "600px",
              height: "600px",
              }, 500 );
            }
        });
    }

任何提示都会很棒！

【问题讨论】：

嗯，通常window.setInterval（或者，更好的是window.setTimeout）用于创建这种效果（无限循环）。
哦，我完全忘记了这些功能。谢谢。

标签： jquery loops infinite-loop

【解决方案1】：

尝试像下面的代码一样使用window.setInterval()（它将以3秒的间隔执行）：

function LoopForever() {
    $('.block').each(function(index) {  
       $(this).css('left', $(this).position().left - 10)
       if (($(this).position().left) < ($(window).width() * 0.4)) {
           $(this).html('<p>Test 1</p>');
           $(this).animate({
              width: "500px",
          height: "500px",
           }, 500 );
       }else if (($(this).position().left) < ($(window).width() * 0.2)) {
           $(this).html('<p>Test 1</p>');
           $(this).animate({
          width: "600px",
          height: "600px",
           }, 500 );
       }
    });
}

var interval = self.setInterval(function(){LoopForever()},3000);

//call code bllow to stop interval
//window.clearInterval(interval);

注意：1000 = 1 秒；

【讨论】：

【解决方案2】：

为了获得更好的性能，请使用 requestAnimationFrame 而不是 setInterval。

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

【讨论】：

【解决方案3】：

jQuery 动画可以链接，所以要运行一个动画然后运行另一个，你可以调用 animate 两次。也可以使用.queue(callback(next)) 将非动画添加到队列中。

jsFiddle Demo

<div class="hello">Hi</div>

.hello {
    position: relative;
    width: 100px;
    height: 100px;
    background: red;
}

$(".hello")
    .animate({ left: 200 })
    .animate({ width: 200, height: 200 })

额外提示：如果您想要一个无限循环，只需将 true 传递给 while:while (true) { ... }。

【讨论】：

虽然知道这很酷，但我希望它们在屏幕上移动并在移动时增大/缩小，但前提是它们到达视口中的某个点。
一种方法是计算何时从移动动画更改为移动和缩放动画。或者，您可以使用step 回调选项设置动画以在满足条件后启动缩放动画，并使用queue: false 选项使其与第一个动画同时发生。