javascript - 存储 window.innerWidth 值并计算调整大小时与新值的差值？

Question

如何存储 window.innerWidth 值并计算调整大小时与新值的差异？

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

解决方案是将变量存储在全局变量内部或外部 onResize，计算新旧数据之间的差异，执行某种条件:(old width - new width) = 100? 如果差值是 100 则做一些事情。

现在从概念上讲我知道如何实现这一点，但我如何才能真正用 JavaScript 实现它？

Answer 1

首先使用一些更好的名称和一个额外的变量作为占位符。另外，我正在向您显示的代码添加一个范围，以便 w 或 width 不会在此代码段之外使用。

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

---

完整的重构。让我们检查一种更结构化的方法，在该方法中，我们会在发生调整大小时累积大小，并查看历史值。这将使我们不仅可以跟踪它是否分段移动，还可以跟踪它总体上如何移动，可以计算速度，并且还包括一些粒度。

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