Как избежать прерывания слайд-шоу в процессе запроса ajax?

Question

Я создаю динамическую c функцию слайд-шоу, поэтому моя цель состоит в том, чтобы у меня было несколько функций ajax с интервалом в 15 секунд, тогда каждая из функций ajax добавит код html к моему view.

вот мой код:

html view

<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>

вот мой пример ajax, который добавит его в мой html view

    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');
            }
        });
    }

и вот триггер на моем слайд-шоу, мой вид слайд-шоу работает модально, поэтому функция слайд-шоу запустится, как только будет нажата кнопка.

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

    });

моя проблема Если нет данных для добавления, оно должно продолжаться в режиме слайд-шоу, но происходит то, что происходит остановка при отсутствии данных. как я могу решить это? любая помощь будет очень признательна.