На странице более сотни div-ов с атрибутом data-countdown, в нём хранится дата в UTC, с помощью jquery и moment.js прохожу по всем дивам и вешаю счетчик с обратным отсчетом (countdown). На компьютере проблем нет, но на смартфоне при большом количестве счётчиков начинает подтормаживать прокрутка.
Можно ли как-то оптимизировать скрипт? Пример на
jsfiddle<div data-countdown="2019/01/01"></div>
<div data-countdown="2018/01/01"></div>
<div data-countdown="2018/10/01"></div>
<div data-countdown="2018/12/01"></div>
<div data-countdown="2018/12/01"></div>
...
$('[data-countdown]').each(function() {
var $this = $(this), nextDrawDate = moment.utc($(this).data('countdown')).toDate();
$this.countdown(nextDrawDate, function (event) {
str = '';
if (event.strftime('%D') == 0) {
str = '';
}
if (event.strftime('%D') == 1) {
str = '%-D день<br>';
}
if (event.strftime('%D') > 1 & event.strftime('%D') < 5) {
str = '%-D дня<br>';
}
if (event.strftime('%D') >= 5) {
str = '%-D дней<br>';
}
if(event.strftime('%D') == 0 & event.strftime('%H') == 0 & event.strftime('%M') == 0 & event.strftime('%S') == 0){
$(this).html('<span class="is-size-7">Время кончилось</span>');
}
else {
if(event.strftime('%D') == 0 & event.strftime('%H') == 0 & event.strftime('%M')<30){
if(event.strftime('%S') % 2 == 0){
$(this).html(event.strftime(str + '%H:%M:%S'));
}
else {
$(this).html('<span class="is-size-7" style="color:#db361c;">Время кончается</span>');
}
}
else {
$(this).html(event.strftime(str + '%H:%M:%S'));
}
}
});
});
