Jquery Animate無限循環：如何避免堆棧限制

Question

我有一些簡單地放大和縮小橫幅圖像的Jquery。當我運行這個時，瀏覽器中出現堆棧限制錯誤。它仍然運行，但是有沒有辦法讓它只能「及時」加載到堆棧中？在查看堆棧時，它會在初始加載中一遍又一遍地加載zoomIn()和zoomOut()，直到達到極限，因此頁面加載非常緩慢。

$(document).ready(function(){ 

    $bannerImg = $('.post-picture img') 

    function zoomIn(){ 
     $bannerImg.animate({ 
      width: 1500, 
     }, 50000,'linear'); 

     $bannerImg.promise().done(zoomOut()); 
    } 

    function zoomOut(){ 
     $bannerImg.animate({ 
      width: 1500, 
     }, 50000,'linear'); 

     $bannerImg.promise().done(zoomIn()); 
    } 

    zoomIn(); 

}); 

更新：感謝您的答案。使用完成（ZoomOut/ZoomIn）工作。

Answer 1

.done()期望的功能參考 - 功能通將盡快PROMI執行se對象被解析。相反，你只是調用函數（不管什麼都不返回，undefined，反正）。如果你這樣做，這些功能將不斷地相互呼叫，作爲一個無限循環。使用此：

$bannerImg.promise().done(zoomOut); 
// and later: 
$bannerImg.promise().done(zoomIn); 

DEMO：http://jsfiddle.net/G6uWs/

（我不得不改變號碼，使其可用）

參考：

• http://api.jquery.com/deferred.done/

Answer 2

您正在調用.done()中的函數，而不是將其作爲參數傳遞。

$bannerImg.promise().done(zoomOut()); 

應該是

$bannerImg.promise().done(zoomOut); 

和

$bannerImg.promise().done(zoomIn()); 

應該是

$bannerImg.promise().done(zoomIn); 

Answer 3

看起來你正在造成無限循環。幸運的是，jQuery有一個完整的回調函數，可以用來防止無限循環。在

不間斷放大和縮小的旗幟

$(document).ready(function() { 

    $bannerImg = $('.post-picture img'); 

    function zoomIn() { 
     $bannerImg.animate({ 
      width: 1500 
     }, { 
      duration: 10000, 
      complete: function() { 
       zoomOut(); 
      } 
     }); 
    } 

    function zoomOut() { 
     $bannerImg.animate({ 
      width: 100 
     }, { 
      duration: 10000, 
      complete: function() { 
       zoomIn(); 
      } 
     }); 
    } 

    zoomIn(); 

}); 

* 來源：*jsfiddle