CODEWITHSUNDEEP
javascriptjqueryhtml
Tim Wilkinson
Tim Wilkinson

Reputation: 3801

jQuery how often do resize window scripts execute

I know on the face of it this sounds like a daft question, but I build a lot of responsive sites, and as such run a lot of my scripts inside a window resize function for when tablets etc are turned from landscape to portrait.

My question is really what are the increments in which the scripts register a window resize, is it on a pixel by pixel basis for example?

I'm currently wanting to rebuild a lot of my scripts to be separated into width range event listeners to hopefully speed up the scripts. As an example this script beneath, lets say at certain points i want a div to change widths,

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);
});

During window resizes does the div get given a width once when it satisfies a condition, or during resize is the div being resized to the same value at every increment?

EDIT

This script is an example to help outline my question, there are easier ways to achieve this i know.

Upvotes: 0

Views: 282

Answers (2)

rob
rob

Reputation: 1286

START EDIT Currently during resize your div is being resized to the same value at every increment. To answer the question, the resize event is triggered very frequently - too fast to perform much processing / DOM manipulation each time. (See below for my suggestion for reducing the number of executions of the code inside the consitions.) END EDIT

It seems you conditions are not correct to get the desired effect (code executed only once when changing into a different width range). Maybe you should try taking into account the current div width:

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);
});

See my fiddle

Upvotes: 1

Fizk
Fizk

Reputation: 1114

How often it triggers is, by my best guess, depending on the machine you're running the script on. If the machine is fast then it will be triggered more often than when the machine is slow. But never the less, it will execute the same amount of times.

http://jsfiddle.net/YA426/

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

If you run my example and resize the inner windows, it will trigger by a pixel-by-pixel resizing. If you resize your browser window it will trigger less, but in a chunk in the end.

My answer is purely based on the example, so I could very well be wrong :)

Upvotes: 0

Related Questions