jQueryで無限ループの配列を持つ関数

Question

配列の内容を示す無限ループでjQueryで関数を作成しようとしています。アラートでうまくいきます - アナウンス1 - 2 - 1 - 2などが表示されます。しかし、アニメーションを追加しようとすると、2番目のアナウンスだけが表示されます。

誰かが私を助けることができますか？

$(document).ready(function() { 
    var announcements = ["<p>announcement 1<\/p>","<p>announcement 2<\/p>"]; 
    function showArrayOfAnnouncements() { 
     for (i = 0; i<announcements.length; i++) { 
// works very well: 
     alert (announcements[i]); 
// doesn't work: 
//   $("#french_announcements").html(announcements[i]).hide().slideDown(500).delay(2000).slideUp(500); 
    } 
    showArrayOfAnnouncements(); 
} 
showArrayOfAnnouncements(); 

}); 

Answer 1

問題は、アニメーションがアニメーションの最後にコールバックへの再帰呼び出しを追加し、再帰を続行する前に終了するためにあなたが待っていないです。あなたのループ（よくある間違い）でグローバルのvar宣言を持っているよう

$(document).ready(function() { 
    var announcements = ["<p>announcement 1<\/p>","<p>announcement 2<\/p>"]; 
    function showArrayOfAnnouncements(i) { 
     alert (announcements[i]); 
     $("#french_announcements").html(announcements[i]).hide().slideDown(500).delay(2000).slideUp(500,() => showArrayOfAnnouncements((i+1) % announcments.length); 
    } 
    showArrayOfAnnouncements(0); 
});