Здравствуйте, уважаемые форумчане!
Начинаю изучать JS, написал скрипт, который при скроллинге прокручивает числа от 0 до значений которые указаны в html блоках.
И мне кажется, что код слишком далек от идеального. Например, как мне кажется, вечно срабатывает событие scroll, даже если прокрутка уже не требуется. Нужны ваши советы как можно улучшить код(оптимизировать, сделать более читаемым и вообще все что придет в голову). Спасибо
<section id="numbers">
<div class="number-block">
<div class="number">160</div>
</div>
<div class="number-block">
<div class="number">600</div>
</div>
<div class="number-block">
<div class="number">73</div>
</div>
<div class="number-block">
<div class="number">96</div>
</div>
<div class="number-block">
<div class="number">200000</div>
</div>
<div class="number-block">
<div class="number">200</div>
</div>
</section>
$(function() {
var distance_for_numbers = $('#numbers').offset().top - $(window).height();
var flag = 0;
$(window).scroll(function(){
if($(window).scrollTop() > distance_for_numbers && flag == 0){
flag = 1;
$(".number").each(function (i, el) {
var currValue = $(this).text();
console.log(currValue);
var props = {
"from": {
"count": 0
},
"to": {
"count": currValue
}
};
$(props.from).animate(props.to, {
duration: 1700 * 1,
step: function (now, fx) {
$(el).text(Math.ceil(now));
},
complete:function() {
if (el.dataset.sym !== undefined) {
el.textContent = el.textContent.concat(el.dataset.sym)
}
}
});
});
}
});
});
