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

任何技巧都会很棒！

Answer 1

尝试使用window.setInterval（）像code bellow（将使用Interval 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秒;

Answer 2

以提高性能，使用requestAnimationFrame而不是setInterval。

https://developer.mozilla.org/en-us/docs/web/api/window/requestanimationframe

Answer 3

可以链接jQuery动画，因此要运行一个动画然后运行另一个动画，您可以将动画调用两次。也可以使用.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 })​

奖励提示：如果您想要一个无限的循环，只需将真实循环添加到： while (true) { ... }。