jquery - 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()（它将以 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 动画可以被链接，所以要运行一个动画然后运行另一个，你可以调用 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) { ... }。