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

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

Answer 3

爲了獲得更好的性能，請使用requestAnimationFrame而不是setInterval。

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