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

Question

我在想是否有可能创建一个无限循环，而不会崩溃浏览器。我正在制作一种画廊类型的东西，当它在屏幕上滚动时会脉冲。

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

    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 );
            }
        });
    }

任何技巧都会很棒！

- Richie

---

通常使用window.setInterval（或更好的方法是window.setTimeout）来创建这种无限循环的效果。 - raina77ow

哦，我完全忘记了那些函数。谢谢。 - Richie

Answer 1

尝试使用类似下面的代码（它将按照3秒间隔执行）：window.setInterval()

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秒；

- Habibillah

Answer 2

为了获得更好的性能，建议使用requestAnimationFrame代替setInterval。

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

- Renan Urata

Answer 3

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

jsFiddle演示

<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) { ... }。

- Douglas

---

虽然了解这些很酷，但我希望它们在移动时能够横跨屏幕并在移动时增长/缩小，但仅当它们到达视口中的某个特定点时才这样做。 - Richie

一种实现方法是计算何时从移动动画切换到移动和缩放动画。或者，您可以使用“step”回调选项来在满足条件时启动缩放动画，并使用“queue：false”选项使其与第一个动画同时发生。 - Douglas