window.onresize：在调整大小期间和完成时触发函数

Question

我是 JavaScript 新手。我试图弄清楚如何创建一个 onresize 函数来在用户调整窗口大小后触发另一个函数。最有可能发生会话超时。

关于编写基本函数有什么想法吗？

<script type="text/javascript">
    window.onresize = function () {
    // The first function goes here while resizing is happening
    // Then function 2 occurs when window resizing is finished by the user
    }    
</script>

这是我正在尝试的修改版本。目标是在调整页面大小时隐藏页面上的主胶囊 div。最初，当 onresize 事件被触发时，div 的可见性会变为备用屏幕，表示“我们正在处理信息，请稍候”。

脚本经验：

var resizeTimeout;
window.onresize = function() {
        clearTimeout(resizeTimeout);
         document.getElementById("loading").className = "loading-visible";
         document.getElementById('XXXDIV').style.visibility = 'hidden';
             for ( var h = 1; h < 40; h++)
                 {
                 document.getElementById('DesignXXX' + h ).style.visibility = 'hidden';
                 }
    resizeTimeout = setTimeout(function() {
            var hideDiv = function(){document.getElementById("loading").className = "loading-invisible";};
            var oldLoad = window.onload;
            var newLoad = oldLoad ? function(){hideDiv.call(this);oldLoad.call(this);} : hideDiv;
            location.reload(true) = newLoad;
            document.getElementById('XXXDIV').style.visibility = 'visible';
             for ( var h = 1; h < 40; h++)
                 {
                 document.getElementById('DesignXXX' + h ).style.visibility = 'visible';
                 }
    }, 2000); // set for 1/4 second.  May need to be adjusted.
};

</script>

Answer 1

这应该可以做到：

var resizeTimeout;
window.onresize = function() {
        clearTimeout(resizeTimeout);
        // handle normal resize
        resizeTimeout = setTimeout(function() {
            // handle after finished resize
        }, 250); // set for 1/4 second.  May need to be adjusted.
    };

这是一个给怀疑者的工作示例： http://pastehtml.com/view/b2jabrz48.html

Answer 2

在 jQuery 网站上有一条关于调整大小事件的评论：

根据实现的不同，调整大小事件可以在调整大小过程中连续发送（Internet Explorer 和基于 WebKit 的浏览器（如 Safari 和 Chrome）中的典型行为），或者仅在调整大小操作结束时发送一次（其他一些浏览器（例如 Opera）中的典型行为。

Answer 3

在调整大小时，您不会触发该事件，因为直到调整大小之后该事件才会触发。

MDN 参考：

**注意：**

< code>调整大小事件在窗口大小调整后触发。