为什么我的 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();
});

谢谢

编辑：我希望它循环运行：人字形出现，然后消失，然后再次出现等等。只要用户在页面上。

Answer 1

您的代码正在无限递归。

我改成添加一个参数goingDown，当为true时会导致动画隐藏人字形，并设置一个全局变量的状态downState 匹配 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 2

试试这个

$('#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 3

这是另一个解决方案，因为我首先提供的解决方案（仍然可以在这个答案的底部找到）不符合提问者的需要。

根据以下问题，异步回调不会导致任何堆栈溢出。

(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>

我在 Whosebug 上找到了一个非常巧妙的解决方案作为替代方案。

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>

Answer 4

请试试这个

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

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

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

为什么我的 jquery animate() 回调会导致溢出？递归

Why is my jquery animate() callback causing an overflow ? Recursion

javascript

recursion

jquery

callback

jquery-animate