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

试试这个

origin/lexis

你也可以做得更好

lexis

Answer 2

您的代码无限递归。

我更改了它以添加参数 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 3

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

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

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>

我在stackoverflow找到了一个非常简洁的解决方案作为替代方案。

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（）回调导致溢出？递归

4 个答案: