存储window.innerWidth值并使用resize上的新值计算差异？

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

Answer 2

将当前宽度存储为oldWidth。在resize侦听器中，检查当前宽度是否与oldWidth相差100px（或更多）。如果是，请执行一些操作并使用当前值更新oldWidth。

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

尝试以下方法。但请注意 - ＆＃34;调整大小＆＃34;当用户调整窗口大小时，会定期发送事件。此代码将具有检测即时（最小化，最大化）或非常快速发生的调整大小的效果 - 比每个渲染刻度100px更快。如果您想要最终调整大小的最终大小，一旦用户放手，您就需要超时，就像在回答此问题时一样：Detect when a window is resized using JavaScript ?

<!-- START GREEN BUTTON -->
<center>
    <table width="100%">
        <tr>
            <td>
                <table border="0" cellpadding="0" cellspacing="0"> 
                    <tr>
                        <td height="20" width="100%" style="font-size: 20px; line-height: 20px;">
                        &nbsp;
                        </td>
                    </tr>
                </table>
                <table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
                    <tbody>
                    <tr>
                        <td align="center">
                            <table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
                                <tr>
                                    <td align="center" bgcolor="#87be45" width="150" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;">
                                        <a href="http://www.example.com" style="padding: 10px;width:150;display: block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: Calibri, sans-serif, 'Open Sans';color: #ffffff;background: #87be45;border: 1px solid #87be45;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;" class="button_link">
                                            Get Started!
                                        </a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <table border="0" cellpadding="0" cellspacing="0"> 
                    <tr>
                        <td height="20" width="100%" style="font-size: 20px; line-height: 20px;">
                        &nbsp;
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</center>
<!-- END GREEN BUTTON -->