JQuery, как часто выполняется изменение размеров оконных скриптов

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

Мой вопрос в том, каковы приращения, в которых скрипты регистрируют изменение размера окна, например, на пиксельной основе?

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

function resizeFrame() {
 var wWidth = $(window).width()
 if ((100 < wWidth) && (wWidth < 500)){
 $('.sample').width(300);
 }
 else if ((500 <= wWidth) && (wWidth < 900)){
 $('.sample').width(700);
 }
 else{
 $('.sample').width(900);
 }
};

jQuery(function($){
 $(window).resize(resizeFrame);
});

Во время изменения окна div получает заданную ширину один раз, когда он удовлетворяет условию, или во время изменения размера div изменяется на одно значение при каждом приращении?

РЕДАКТИРОВАТЬ

Этот сценарий является примером, чтобы помочь описать мой вопрос, есть более простые способы достичь этого, я знаю.

2 ответа

СТАРТ РЕДАКТИРОВАТЬ В настоящее время во время изменения размера размер div изменяется до одного значения с каждым шагом. Чтобы ответить на вопрос, событие изменения размера запускается очень часто - слишком быстро, чтобы выполнять большую обработку/манипуляцию DOM каждый раз. (См. Ниже мое предложение о сокращении числа исполнений кода внутри этих совпадений.) END EDIT

Кажется, что условия не правильны, чтобы получить желаемый эффект (код выполняется только один раз при изменении в другом диапазоне ширины). Может быть, вы должны попытаться принять во внимание текущую ширину div:

function resizeFrame() {
 var wWidth = $(window).width()
 var currentWidth = $('.sample').width();

 // for debug
 var updated = false;


 if ((currentWidth != 300) && (wWidth >= 100) && (wWidth < 500)){
 $('.sample').width(300);
 updated = true;
 }
 else if ( (currentWidth != 700) && (wWidth >= 500) && (wWidth < 900)){
 $('.sample').width(700);
 updated = true;
 }
 else if (currentWidth != 900 && wWidth >= 900) {
 $('.sample').width(900);
 updated = true;
 }

 // for debug
 $('.sample').html("window:" + wWidth + " div:" + currentWidth + " updated: " + updated);
};

jQuery(function($){
 $(window).resize(resizeFrame);
});

Смотрите мою скрипку


Как часто это срабатывает, я думаю, в зависимости от того, на каком компьютере вы запускаете скрипт. Если машина работает быстро, она срабатывает чаще, чем когда машина работает медленно. Но, тем не менее, он будет выполнять столько же раз.

http://jsfiddle.net/YA426/

$(window).resize(function(){
 console.log("Resize")
})

Если вы запустите мой пример и измените размер внутренних окон, он будет запускаться путем изменения размера поэтапного размера. Если вы измените размер своего окна браузера, это вызовет меньше, но в куске в конце.

Мой ответ основан исключительно на примере, поэтому я вполне мог ошибаться :)

licensed under cc by-sa 3.0 with attribution.