Перед после изменения размера событий

Question

Я хотел бы сделать что-то до и после изменения размера элемента, я попытался связать размер события и его работу:

$('#test_div').bind('resize', function(){ 
      // do something 
}); 

Я нашел некоторые вопросы, но решения timeout, я не хотят использовать timeout. Я просто хотел бы немедленно обработать :)

Смотрите также:

• JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

• jQuery - how to wait for the 'end' or 'resize' event and only then perform an action?

Спасибо за любые предложения :)

Answer 1

re - это не такая вещь, как конечное событие изменения размера, которое вы можете прослушать. Единственный способ узнать, когда пользователь изменил размер, - это подождать, пока не пройдет какое-то короткое время, при этом не произойдет больше изменений размера. Вот почему решение почти всегда включает в себя использование setTimeout(), потому что это лучший способ узнать, прошел ли какой-то период времени без каких-либо изменений размера.

Это предыдущий мой ответ прослушивает .scroll() события, но это точно такое же понятие, как .resize(): More efficient way to handle $(window).scroll functions in jquery? и вы можете использовать ту же концепцию для изменения размера, как это:

var resizeTimer; 
$(window).resize(function() { 
    if (resizeTimer) { 
     clearTimeout(resizeTimer); // clear any previous pending timer 
    } 
    // set new timer 
    resizeTimer = setTimeout(function() { 
     resizeTimer = null; 
     // put your resize logic here and it will only be called when 
     // there's been a pause in resize events 
    }, 500); 
} 

Вы можете экспериментировать с 500 значение для таймера, чтобы увидеть, как вам это нравится. Чем меньше число, тем быстрее он вызывает обработчик изменения размера, но затем его можно вызвать несколько раз. Чем больше число, тем дольше пауза у него есть до начала стрельбы, но с меньшей вероятностью срабатывает несколько раз во время одного и того же действия пользователя.

Если вы хотите что-то сделать до изменения размера, вам нужно будет вызвать функцию при первом событии изменения размера, которое вы получите, а затем не будете снова вызывать эту функцию во время текущей операции изменения размера.

var resizeTimer; 
$(window).resize(function() { 
    if (resizeTimer) { 
     clearTimeout(resizeTimer); // clear any previous pending timer 
    } else { 
     // must be first resize event in a series 
    } 
    // set new timer 
    resizeTimer = setTimeout(function() { 
     resizeTimer = null; 
     // put your resize logic here and it will only be called when 
     // there's been a pause in resize events 
    }, 500); 
} 

Answer 2

Вы можете использовать smart resize JQuery плагин, но в конце концов он все еще использует setTimeout().

Опять же, он не будет ждать конца изменения размера ... он просто дросселирует его.

Answer 3

Вы также можете попробовать другой способ.

Сначала нужно создать метод для получения активной точки останова (мобильный, планшет, рабочий стол, рабочий стол, большой) т.е. Breakpoint.getActive()

Затем использовать массив для сохранения последних двух состояний записываются при изменении размера.

Пример кода:

var beforeAfterResize = []; 
$(window).resize(function() { 

var resizeInfo = Breakpoint.getActive(); 
if (beforeAfterResize.length > 1) { 
    beforeAfterResize[0] = beforeAfterResize[1]; 
    beforeAfterResize[1] = resizeInfo; 
} else { 
    beforeAfterResize.push(resizeInfo); 
} 
console.log(beforeAfterResize); 

}); 

Массив называется beforeAfterResize будет хранить только два значения в позиции 0 и 1. Если у Вас есть больше чем 2 значения, то положение 0 занимает в значении положении 1 и положении 1 , самое последнее значение, сохранит текущую информацию точки останова.

Таким образом, вы сможете провести сравнение до и после без тайм-аута.

После изменения размера вы сможете сравнить значения между beforeAfterResize [0] и beforeAfterResize [1] и, если они отличаются, вы можете сделать некоторые действия.

Пример: предположим, что я хочу знать, изменился ли после изменения размера с мобильного на рабочий стол или большой рабочий стол. Тогда я буду использовать что-то вроде этого:

var fromMobile = false; 
if (((beforeAfterResize[0] === "mobile") || (beforeAfterResize[0] === "tablet")) 
    && ((beforeAfterResize[1] === "desktop") || (beforeAfterResize[1] === "desktop-large"))) { 
    fromMobile = true; 
} 

Сообщите мне, если это сработало для вас.