Функция jQuery не работает должным образом

Question

У меня есть функция, которую я копирую из Интернета. Он работает правильно при загрузке, но когда я добавляю элементы, используя prepend(), прокрутки, на которых функция уже работает, начинают мигать. Я добавляю это в jsfiddle. Пожалуйста, посмотрите, какая помощь будет оценена.

$('.b').click(function(){ 
    $('.top').prepend('<div class="inner">brown fox jumps <span class="sinc"> 1462883724000 </span> </div>'); 
    $('.sinc').UpdateSince(1000); 

}); 

Работа сниппет:

$.fn.UpdateSince = function(interval) { 
 

 
    var times = this.map(function() { 
 
    return { 
 
     e: $(this), 
 
     t: parseInt($(this).html()) 
 
    }; 
 
    }); 
 

 
    var format = function(t) { 
 
    if (t > 86400) { 
 
     return Math.floor(t/86400) + ' days ago'; 
 
    } else if (t > 3600) { 
 
     return Math.floor(t/3600) + ' hours ago'; 
 
    } else if (t > 60) { 
 
     return Math.floor(t/60) + ' minutes ago'; 
 
    } else { 
 
     return t + ' seconds ago'; 
 
    } 
 
    } 
 

 
    var update = function() { 
 
    var now = new Date().getTime(); 
 
    $.each(times, function(i, o) { 
 
     o.e.html(format(Math.round((now - o.t)/1000))); 
 
    }); 
 
    }; 
 

 
    window.setInterval(update, interval); 
 
    update(); 
 

 
    return this; 
 
} 
 
$('.sinc').UpdateSince(1000); 
 

 
$('.b').click(function() { 
 
    $('.top').prepend('<div class="inner">brown fox jumps <span class="sinc"> 1462883724000 </span> </div>'); 
 
    $('.sinc').UpdateSince(1000); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div class="top"> 
 
    <div class="inner"> 
 
    brown fox jumps 
 
    <span class="sinc">1462883724000</span> 
 
    </div> 
 
</div> 
 

 
<input type="button" class="b" value="click me">

Answer 1

Проблема в том, что вы начинаете новый интервал каждый раз, когда вы нажимаете на кнопку. Вы можете либо clear the previous interval перед тем, как начать новый, либо запустить интервал один раз и обновить список.

Вот пример очистки интервала:

var updateInterval; // Store the interval ID here 

$.fn.UpdateSince = function(interval) { 

    ... 

    // Clear the previous interval 
    clearInterval(updateInterval); 
    updateInterval = setInterval(update, interval); 
    update(); 

    return this; 
}; 

Answer 2

Он мигает из-за 1000 мс (1 мс) время interval.TRy изменяющимися его до 30000, чтобы увидеть разницу.

 $('.sinc').UpdateSince(30000);