JQuery Queue Function

Question

Я пишу слайд-шоу. У меня наконец есть хорошая функция для показа только одного слайда. Он показывает это точно так же, как я хочу, с shoSlide ждать какое-то время, а затем скрыть слайд. Нет, что у меня это хорошо для одного слайда, моя проблема делает это для многих.

function slideShow() { 
    console.log("countdown Slide Count: " + numberOfSlides); 

    console.log("Current slide number: " + jslideNumber); 

    $('#slide' + jslideNumber).fadeIn(1000).delay(5000).queue(function (next) { 
     console.log("Hiding Slide Number: " + jslideNumber); 
     $('#slide' + jslideNumber).fadeOut(1000); 
     next(); 
    }); 
} 

slideShow(); 

Я пробовал поместить в цикл WHILE, но используя либо петлю WHILE, либо FOR результаты в бесконечном счетчике. Я увеличивал jslideNumber ++ до этого, но проблема в том, что цикл увеличивает счетчик быстрее, чем может запускаться очередь. Поэтому, когда отображается Slide1, обычно Slide1 должен скрываться, но вместо этого отображается Slide1, а затем он пытается скрыть Slide6 к тому времени, когда задержка доходит до счетчика.

Answer 1

Вы можете использовать "[id^=slide]" селектор, $.map(), .dequeue()

var n = 150; 
 

 
$.map(Array(n), function(val, index) { 
 
    $("body").append("<div id=slide"+index+">"+index+"</div>") 
 
}) 
 

 
$({}).queue("_fx", $.map($("[id^=slide]"), function(el) { 
 
    return function(next) { 
 
    $(el).fadeIn(1000, function() { 
 
     $(this).delay(5000).fadeOut(1000, next) 
 
    }) 
 
    } 
 
})).dequeue("_fx")

[id^="slide"] { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script>