Javascript 在ajax请求过程中如何避免幻灯片播放的中断？

我正在构建一个动态幻灯片功能，所以我的目标是我有多个ajax功能，间隔为15秒，然后每个ajax功能将向我的视图中附加一个html代码

这是我的密码：

html视图

<div class="modal fade in" id="carousel_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-full" role="document">
        <div class="modal-content">
            <div class="modal-body-custom-full" id="result">
                <div id="container-slides">
          <div class="slide showing"></div>
          <div class="slideshow_new_transfer" id="slideshow_new_transfer">

          </div>
                    <?php foreach($announcements as $announcement){?>
                        <div class="slide" id="announcement_tv_images">
                            <img  height="100%" width="100%" src="<?php echo base_url('./upload/'.$announcement->image_name.'')?>"/>
                        </div>
                    <?php }?>

                    <?php foreach($adhocs as $adhoc){?>
                        <div class="slide" id="adhoc_tv_images">
                            <img  height="100%" width="100%" src="<?php echo base_url('./upload/'.$adhoc->image_name.'')?>"/>
                        </div>
                    <?php }?>

                </div>
            </div>
        </div>
    </div>
</div>

    function get_new_transfer() {
        stopSlideshow();
        $.ajax({
            url: base_url + "",
            type: "GET",
            dataType: "JSON",
            success: function(data) {
                var listDivNewTransfers = '';

                if (data.length === 0) {
                    //then there is no data to append, just continue with the slideshow
                    var slides = document.querySelectorAll('#container-slides .slide');
                    var currentSlide = 0;
                    timer_trigger = setInterval(nextSlide, timer_slideshow);
                    function nextSlide() {
                        slides[currentSlide].className = 'slide';
                        currentSlide = (currentSlide + 1) % slides.length;
                        slides[currentSlide].className = 'slide showing';
                    }

                }else{
                    $(".slide").removeClass("showing");
                    stopSlideshow();

                    for (var i = 0; i < data.length; i++) {

                        listDivNewTransfers = listDivNewTransfers +
                            ' <div class="slide" id="transfer_emp" data-transfer="' + data[i].user_id + '"> ' +
                            '   <div class="body_new_transfer">' +
                            '       <div id="lt_header">' +
                            '          <img class="max_width_header" src="' + base_url + 'metronic/theme/classic/assets/images/header_footer.png' + '">' +
                            '        </div>' +
                            '    <div class="box box_new_transfer">' +
                            '       <img width="100%" height="100%" src="' + base_url + 'metronic/theme/classic/assets/images/tv_images/star_background.png' + '" alt="Flying Kites">' +
                            '       <div class="text">' +
                            '           <h1>A NEW TRANSFER FROM</h1>' +
                            '         <b><span class="transfer_user_name">' + data[i].name + '</span></b>' +
                            '       </div>' +
                            '    </div>' +
                            '    <div id="lt_footer">' +
                            '      <img class="max_width_footer" src="' + base_url + 'metronic/theme/classic/assets/images/tv_images/star_background.png' + '">' +
                            '    </div>' +
                            '  </div>' +
                            ' </div>';
                    }

                    $('.slideshow_new_transfer').html(listDivNewTransfers);
                    var slides = document.querySelectorAll('#container-slides .slide');
                    var currentSlide = 0;
                    timer_trigger = setInterval(nextSlide, timer_slideshow);

                    function nextSlide() {
                        slides[currentSlide].className = 'slide';
                        currentSlide = (currentSlide + 1) % slides.length;
                        slides[currentSlide].className = 'slide showing';
                        update_status_of_new_transfer(slides[currentSlide].dataset.transfer);
                    }

                }

            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert('Error adding / update data');
            }
        });
    }

---

我的问题是，如果没有要追加的数据，它应该在幻灯片上继续，但发生的是，当没有数据时，它会停止。我怎样才能解决这个问题？非常感谢您的帮助。

您应该将下载图像的异步过程与在幻灯片放映中更改图像的同步过程分开。@BlueWater86嗨，先生，您能给我举个例子吗？

    $('#tv_launch_tv_mode_btn').click(function() {
        stopSlideshow();
        $('#carousel_modal').modal('show');
        setInterval(get_new_transfer, 15000);

        var slides = document.querySelectorAll('#container-slides .slide');
        var currentSlide = 0;
        timer_trigger = setInterval(nextSlide, timer_slideshow);
        function nextSlide() {
            slides[currentSlide].className = 'slide';
            currentSlide = (currentSlide + 1) % slides.length;
            slides[currentSlide].className = 'slide showing';
        }

    });