javascript - jQuery - キャッチされていない RangeError: 最大コール スタック サイズを超えました

Question

次のコード ( Fiddle hereを参照) は、質問のタイトルで言及されているスタック オーバーフローをスローします。パルス効果で円形の画像の周りにボックス シャドウを表示しようとしています。誰でも再帰を指摘できますか？私は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();