Store the window.innerWidth value and calculate the difference with the new value on resize?

Question

How do I store the window.innerWidth value and calculate the difference with the new value on resize?

var w;

function example {

var onResize = function () {

    w = {width: window.innerWidth || document.body.clientWidth };

if (difference of old width and this (new) width is 100) {
// then do some stuff
}

window.addEventListener('resize', onResize);
onResize();
}

The solution would be to store the variable inside a global or outside on onResize, calculate the difference between the old and new data, do a condition of some sort: (old width - new width) = 100? and if the difference is 100 then do some stuff.

Now conceptually I know how to achieve this, but how can I actually go about implementing it in JavaScript?

Answer 1

Just start out by using some better names and an extra variable as a placeholder. Also, I am adding a scope to your shown code so that w or width does not get used outside of this snippet.

(function(){
    //create a closed scope to prevent naming collision        

    //store the previous value for the width
    var previousWidth = window.innerWidth || document.body.clientWidth;

    var onResize = function () {

        //calculate the current value for the width
        var currentWidth = window.innerWidth || document.body.clientWidth;

        //look to see if the change was more than 100
        //using the absolute value here is important because it ensures
        //that a change of -150 is also a difference of more than 100
        if (Math.abs(previousWidth - currentWidth) > 100 ) {
            // then do some stuff

            //change the prior width to the current for for future references
            previousWidth = currentWidth;
        }
    };

    window.addEventListener('resize', onResize);
})()

---

A complete refactor. Let's examine a more structured approach, where we accumulate the size of the resize as it occurs, and also look at a historical value. This will allow us to not only track if it moved in segments, but how it moved in general, a speed could be calculated, and also include some granularity.

jsFiddle Demo

(function(){
    //create an ExecutionContext to ensure there are no
    //variable name collisions

    //store the value of the first width of the window
    var starting = getWidth();

    //make this a function since it is called so often (DRY)
    function getWidth(){
        return window.innerWidth || document.body.clientWidth;
    }

    //this is a flag to determine if a resize is currently happening
    var moving = false;

    //this value holds the current timeout value
    var tracking = null;

    //this function allows for the resizing action to throttle
    //at 450ms (to ensure that granular changes are tracked)
    function throttle(callback){
        //setTimeout returns an integer that can later be called
        //with clearTimeout in order to prevent the callback from executing
        tracking = setTimeout(function(){
            //if this executes, it is assumed that the resize has ended
            moving = false;
            //checks to ensure calling the callback wont cause an error
            if(toString.call(callback) == "[object Function]")callback();
        },450);
    }

    //simple log in here but this will allow for other code to be placed
    //to track the beginning of the resize
    function resizeStart(){
        console.log('resizing started');
    }

    //same as the start, this will execute on finish for extension
    //purposes
    function resizeEnd(){
        console.log('resizing finished');
    }

    //this will be used to test against where the resize width value
    //started at
    var beginning = getWidth();

    //this array will hold the widths of the page as measured during
    //each resize event
    var steps = [];

    //seed it with the first value right now
    var step = getWidth();
    steps.push(step);

    //these will hold the granular changes which are the differences
    //between each concurrent step, only while a resize is active
    var changes = [];

    //the resize event handler
    window.addEventListener('resize', function(){
        //if a resize event is not active then call
        //the start function, set the width of the beginning variable
        //as an anchor so to speak, and make sure to mark resize as active
        //with the moving flag
        if(!moving){
            resizeStart()
            beginning = getWidth();
            moving = true;
        }else{
            //if the resize event is already active (moving) then clear out
            //the ending time so that it can be reconstructed since
            //we are still collecting information
            clearTimeout(tracking);
        }

        //this change will be the difference between the width now
        //and the width of the last reading
        var change = getWidth() - step;

        //once the change is calculated we update the current width reading
        //of the step
        step = getWidth();

        //and then store both of them (remember changes is only populated
        //while resize is active)
        changes.push(change);
        steps.push(step);

        //this sets up the timeout as noted above
        throttle(function(){
            //the reduce is just suming, so this takes the sum of
            //the changes array
            var totalChange = changes.reduce(function(a, b) {
                return a + b;
            });

            //if the sum was positive then the resize made the window larger
            var direction = totalChange > 0 ? "larger" : "smaller";

            //the assumption if this callback function is executing is that 
            //the resize event has finished, and so the changes array 
            //is reset
            changes = [];

            //this gets back to the very original question of when
            //there had been 100 pixels of change
            if(Math.abs(totalChange) > 100){
                console.log(Math.abs(totalChange) + " pixel granular change " + direction);
            }

            //this just logs what the overall change has been this whole time
            console.log(Math.abs(steps[steps.length-1] - starting)+" pixel overall change");

            //again noting that resize has ended, reset the "anchor" width
            beginning = getWidth();

            //and finally call our ending function
            resizeEnd();
        });
    });
})()

Answer 2

Store the current width as oldWidth. In resize listener check if current width differs form oldWidth by 100px (or more). If it does, then do some stuff and update the oldWidth with current value.

var oldWidth = window.innerWidth;
var onResize = function () {
var w = window.innerWidth;

    if ( Math.abs( w - oldWidth ) >= 100 ) {
    // then do some stuff
      console.log( 'diff >= 100px' );
      oldWidth = w;
    }
}

window.addEventListener('resize', onResize);

http://jsfiddle.net/xtx1L6nr/

Answer 3

Try the following. But be aware - "resize" events are sent periodically as the user resizes the window. This code will have the effect of detecting resizes that occur instantaneously (minimize, maximize) or very quickly - faster than 100px per render tick. If you want the eventual size of the final resize, once the user lets go, you'll need a timeout, like in the answer to this question: Detect when a window is resized using JavaScript ?

var previousWidth;
var detectBigChange = function () {
  var newWidth = window.innerWidth || document.body.clientWidth;
  if (!!previousWidth && Math.abs(newWidth - previousWidth) > 100) {
    console.log("Big change!");
  }
  previousWidth = newWidth;
}

window.addEventListener('resize', detectBigChange);
detectBigChange();