Показать сообщение отдельно
  #1 (permalink)  
Старый 18.03.2017, 12:03
Новичок на форуме
Отправить личное сообщение для yourmaze Посмотреть профиль Найти все сообщения от yourmaze
 
Регистрация: 11.05.2016
Сообщений: 3

Прокрутка чисел при скроллинге
Здравствуйте, уважаемые форумчане!
Начинаю изучать 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)
                            }
                        }
                    });

                });
            }
        });
    });
Ответить с цитированием