Почему очень долго реагирует на изменения ширины браузера?

Question

[pegas]

При изменении вырины браузера body должен выезжать(left: -181px) и становится на место (left: 0). Всё в принципе работает вот рабочий кусок от кода:

$(window).resize(function(){
	if ($(document).width() >= 751){
	$('body').animate({
      left: '0'
    });
}
if($('.menn').css('right') == '0px' &&  $(document).width() < 751){
	$('body').animate({
      left: '-181'
    });
};

});

Но очень долго реагирует. Например при сужении экрана программа "думает" очень долго и только потом применяется анимация к body left: '-181'

Comments

[Vitaliy]

можно попробовать через CSS transition. Кажется при ресайзе много ресурсов тратится на перерисовку страницы, поэтому не дает JS выполниться

Answer 1

[Stalker_RED]

Если ресайзите окно мышкой, то возможно событие ресайза вызывается много-много раз пока вы "тянете" за границу окна. И на каждом событии ресайза, стартует анимация, и это вызывает тормоза. Это можно проверить в профайлере в консоли браузера, или вписать console.log('resize start'), в обработчике wondow.resize.

Лечится как-то так: https://www.google.com/search?q=jquery+resize+throttle

Comments

[pegas]

Анимация-то стартует только 2 раза на точке $(document).width() < 751) и на $(document).width() >= 751

[Stalker_RED]

Артём: допустим, изначально ширина страницы 1000, и я уменьшаю ее мышкой до 500, например. На участке 500-751 есть 250 возможностей получить событие resize. Потому что 750, это тоже меньше чем 751. И 749 меньше чем 751.
Правда, чтобы сработал на каждой точке придется очень медленной мышкой вести. Но пара десятков событий - запросто.

[pegas]

Stalker_RED: Да точно я чёт перекипел совсем... я понял вот применил этот код помог

window.onresize = function() {
    clearTimeout(doit);
    doit = setTimeout(function() {
        resizedw();
    }, 100);