Javascript setInterval занимает слишком много времени для сброса

Question

Эй, у меня есть панель (br_Panel), которая содержит четыре элемента div с классом smallPanel и идентификатором br_Panel1, br_Panel2 и т. Д., Которые имеют одинаковый и одинаковый размер и расположены друг над другом. Когда функция запускается, каждые 5 секунд она затухает и показывает нижнюю, а когда все они исчезают, все возвращаются с fadeIn. Проблема в том, что пауза между постепенным исчезновением последнего div и постепенным исчезновением для всех из них составляет 15 секунд, то есть в три раза больше времени, которое требуется каждому div для выхода. Как я могу уменьшить эту паузу во время сброса до 5 секунд?

setInterval(function() {
    if(i < 0) {
        $('#br_Panel').find($('.smallPanel')).fadeIn();
        i = 5;
    }
    else
        i--;
    $('#br_Panel').find($('#br_Panel' + i)).fadeOut();
}, 5000);

Это html (если это помогает, каждый из самых внутренних div'ов позиционируется абсолютно как #br_Panel, так что они перекрывают друг друга):

<div class="height1 panel" id="br_Panel">
    <div class="smallPanel" id="br_Panel1">content</div>
    <div class="smallPanel" id="br_Panel2">content</div>
    <div class="smallPanel" id="br_Panel3">content</div>
    <div class="smallPanel" id="br_Panel4">content</div>
</div>

Answer 1

Вы упомянули, что ваш br_Panel содержит четыре элемента div с классом smallPanel, но ваша функция интервала будет запущена шесть раз, прежде чем i сбрасывается (5, 4, 3, 2, 1, 0). Может случиться так, что ваша функция работает в 2 раза больше, чем нужно, что приводит к тому, что ваша задержка будет на 10 секунд дольше, чем должна быть.

В качестве дополнительного примечания, при использовании.find() вам нужно только передать используемый вами селектор строки css, а не объект enter jQuery:

$('#br_Panel').find('.smallPanel').fadeIn();