jQuery - 未捕获RangeError:超出最大调用堆栈大小

Question

以下代码(请参阅此处的小提琴)抛出问题标题中引用的堆栈溢出.我试图让一个盒子阴影在脉冲效果中显示在圆形图像周围.有谁可以指出递归,拜托？我是一个Javascript新手,无法看到它.谢谢.

HTML

<div id="pulseDiv"> 
      <a href="#" id="advisers-css-image">
           <div id="advisersDiv"><img src="http://ubuntuone.com/1djVfYlV62ORxB8gSSA4R4"></div>
      </a>
</div>

CSS

.pulse { box-shadow: 0px 0px 4px 4px #AEA79F; }

使用Javascript

function fadeIn() {
   $('#pulseDiv').find('div.advisersDiv').delay(400).addClass("pulse");
   fadeOut();
};

function fadeOut() {
   $('#pulseDiv').find('div.advisersDiv').delay(400).removeClass("pulse");
   fadeIn();
};

Answer 1

您的调用是递归调用的,它会无限地将函数推送到堆栈,导致由于递归行为导致最大调用堆栈超出错误.而是尝试使用setTimeout这是一个回调.

同样基于您的标记,您的选择器是错误的.它应该是#advisersDiv

演示

function fadeIn() {
    $('#pulseDiv').find('div#advisersDiv').delay(400).addClass("pulse");
    setTimeout(fadeOut,1); //<-- Provide any delay here
};

function fadeOut() {
    $('#pulseDiv').find('div#advisersDiv').delay(400).removeClass("pulse");
    setTimeout(fadeIn,1);//<-- Provide any delay here
};
fadeIn();