Бесконечная петля таймера

Question

Я хотел бы сопоставить индикатор выполнения с изображением слайд-шоу, в котором изображения исчезают каждые 3,5 секунды.

Индикатор выполнения должен заполнять экран (соответствующий длине слайда), а затем исчезать и снова появляться для нового слайда.

Теперь у меня есть это:

function progress(percent, $element) { 
    $element.find('div').animate({width:percent+'%'}, 3500); 
} 

progress(100, $('#progressBar')); 
var progressClone = $('#progressBar').clone(); 

setInterval(function() { 
    $('#progressBar').remove(); 
    $(progressClone).appendTo('#wrapBg'); 
    progress(100, $('#progressBar')); 
}, 3500); 

Он отлично работает, но только два раза. Затем на третьем слайде, индикатор не исчезает ...

у меня нет ошибки в консоли ...

HTML:

<div id="wrapBg"> 
    ///SLIDER /// 
    <div id="progressBar"><div></div></div> 
</div> 

Вы знаете, что проблема?

Answer 1

Я не полностью уверен в этом, но одна из проблем заключается в том, что вы клонируете элемент с идентификатором (должен быть только один элемент с идентификатором). Однако jQuery может искать все элементы с этим идентификатором (не уверен), и когда вы его удаляете, вы, вероятно, не сможете его клонировать. Вместо этого вы можете подумать о динамическом создании элемента и добавлении его в слайд-шоу.

//inside the interval 
$('#progressBar').remove(); 
var progressBar = $('<div/>').prop('id', 'progressBar').html('<div/>'); 
progressBar.appendTo('#wrapBg'); 
progress(100, progressBar);