Question

我正在尝试在jQuery中创建一个带有无限循环的函数，该循环将显示数组的内容。它可以正常工作 - 它显示公告1 - 2 - 1 - 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

问题是你没有等待动画在继续递归之前结束，在动画结束时将递归调用添加到回调中。

$(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); 
});

使用jQuery通过数组进行无限循环的函数

1 个答案: