爲什麼我的jquery animate（）回調導致溢出？遞歸

Question

我正在使用animate（）jquery函數進行遞歸回調。 但是每次從頭開始頁面崩潰。

var goingDown = true; 

function animateChevron() { 
     if (goingDown) { 
      goingDown = !goingDown; 
      $('#chevron').animate({'opacity': 1}, 500, animateChevron); 
     } 
     else { 
      goingDown = !goingDown; 
      $('#chevron').animate({'opacity': 0.1}, 500, animateChevron); 
     } 
} 

$(document).ready(function(){ 
    animateChevron(); 
}); 

謝謝

編輯：我希望它在一個循環作用：V形出現，然後消失，然後再次出現等，只要用戶在頁面上。

Answer 1

請試試這個

$(document).ready(function(){ 
 
\t var speed=500; //in micro seconds 
 
\t setInterval(function(){ 
 
\t \t 
 
    var opacity=$('#chevron').css('opacity')<1 ? 1 : .1; 
 
\t \t $('#chevron').animate({'opacity':opacity},speed); 
 
    
 
\t },speed); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="chevron">Chevron</div>

Answer 2

您的代碼無限遞歸。

我改變了它添加一個參數goingDown，這時候真會導致動畫隱藏字形，並設置一個全局變量唐斯泰特的狀態相匹配goingDown。我刪除了遞歸，你不需要它。

var downState = null; 
 

 
function animateChevron(goingDown) { 
 
    if (!goingDown) { 
 
     $('#chevron').animate({ 
 
     'opacity': 1 
 
    }, 500); 
 
    } else { 
 
    $('#chevron').animate({ 
 
     'opacity': 0.1 
 
    }, 500); 
 
    } 
 
    downState = goingDown; 
 
} 
 

 
$(document).ready(function() { 
 
    animateChevron(true); 
 
});

#chevron { 
 
font-size: 28px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="chevron"> 
 
&raquo; 
 
</div>

Answer 3

試試這個

$('#chevron').animate({'opacity': 1}, { 
    duration: 500, 
    complete: animateChevron 
}); 

也可以讓這個更好的

function animateChevron() {  
$('#chevron').animate({'opacity': 1}, { 
    duration: 500   
}).animate({'opacity': 0.1}, { 
    duration: 500, 
    complete: animateChevron  
});   
} 

Answer 4

這裏是因爲我提供的第一個解決方案另一種解決方案（尚可發現在這個答案的底部）不符合a的需求sker。

根據以下問題，異步回調不會導致任何堆棧溢出。

Will recursively calling a function from a callback cause a stack overflow?

(function animateChevron() { 
 
    // Chevron visible at this point 
 
    $('#chevron').animate({'opacity': 0}, 500,() => { 
 
    // Chevron invisible at this point 
 
    $('#chevron').animate({'opacity': 1}, 500, animateChevron); 
 
    }); 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="chevron">Chevron</div>

---

我發現了一個非常巧妙的解決辦法就在這裏，在計算器作爲替代。

How to make blinking/flashing text with css3?

的代碼片段由Mr. Alien：

(function blink() { 
 
    $('#chevron').fadeOut(500).fadeIn(500, blink); 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="chevron">Chevron</div>