Странная задержка при скролле в setTimeout Javascript в Chrome

309
19 января 2018, 23:55

Здравствуйте, ув. разработчики. Передо мной стоит задание:

ЗАДАНИЕ

Проанимировать страничку, и так есть страница и она поделена на секции(an_section), в каждой секции есть data атрибут, который обозначает открылась она или еще нет. Секции внутри себя имеют елементы(an_el), в которых есть data атрибут задержки и клас самой анимации.

РЕАЛИЗАЦИЯ

При прокрутке до уровня секции, мы по очереди с задержками добавляем классы елементам, как только получил клас один елемент, за ним идет второй и так всю секцию. Секции между собой могут открываться паралельно, но елементы внутри только по-очереди. https://www.pastiebin.com/5a6123bf9cf42 вот код, который я написал для этого(я не являюсь js-разработчиком, я работаю с бэком, но пришлось сделать такое), так что критика принимаеться, возможно реализацая и в корне неверная.

sreenHeight = document.documentElement.clientHeight;
$(window).on('scroll', function(){
$window = $(window);
scrollPosTop = $window.scrollTop();// + 150;
scrollPosBottom = $window.scrollTop()+sreenHeight - 100;
$('.an_section:not(.completed)').each(function(i){
    blockPosTop = $(this).offset().top;
    blockPosBottom = $(this).offset().top+$(this).height();
    if( (scrollPosBottom >= blockPosTop && scrollPosTop < blockPosBottom) && 
    $(this).data('animateStatus') == 0   ){
        $(this).addClass('completed');
        animateMeRek($(this), 0, $(this).find('.an_el').length);
        return false; 
    }
});
});
function animateMeRek($container, id, countElements){
$animate_el = $container.find('.an_el').eq(id);
var old_date = new Date();
!$animate_el.data('delay') ? $delay = 0 : $delay = 
$animate_el.data('delay');
setTimeout(function(){
    console.log(new Date - old_date);
    $this = $container.find('.an_el').eq(id);
    if($this.data('animate') == 'textWrite'){
        autoType(".tab-content.active .an_el", 25, 0);
    }
    $this.addClass($this.data('animate'));
    if(id == countElements-1) $container.data('animateStatus', 1);
    if(id < countElements-1) animateMeRek($container, id+1, countElements);
}, 100);
}
ПРОБЛЕМА

И так, этот код хорошо работает в мозилле, ие11, но в хроме при быстром скролле тачпадом/мышкой мы видим лишнюю задержку в 1.5 - 2с на settimeout, когда там стоит точно 100мс для експеримента.(строка 29-34). Если же скролить pg dn то никакой лишней задержки нету. Эту проблему в хроме я мог устранить только если удалял часть DOM, поэтому думаю, что нужно оптимизировать код, но как ума не приложу. Помогите пожалуйста, уже несколько дней в тупике

READ ALSO
Отправить данные на сервер по нажатию кнопки. Html

Отправить данные на сервер по нажатию кнопки. Html

Сервер у меня на ардуино, Ethernet shieldУ меня не получается по нажатию на кнопку отправить POST запрос

292
Scroll Right JavaScript

Scroll Right JavaScript

Добрый вечер! Есть контейнер 1024x768 в нем блоки 220x220, скролл горизонтальный!

354
JS незаметный скролл чата вниз

JS незаметный скролл чата вниз

При заходе в чат, естественно нужно проскроллить вниз, дабы показать последние сообщенияЯ делаю это так:

271
Будет ли интересен людям подобный проект? [требует правки]

Будет ли интересен людям подобный проект? [требует правки]

Добрый день! Хочется узнать ваше мнение о подобной задумкеЧто стоит учесть при разработке, на что обратить внимание и будет ли интерес людей...

336