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

【问题标题】：window.onresize: firing a function during, and when resizing is completewindow.onresize：在调整大小完成期间和完成时触发一个函数
【发布时间】：2011-08-02 17:56:19
【问题描述】：

我是 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>

【问题讨论】：

对于调整大小结束处理程序，考虑这个插件：benalman.com/projects/jquery-throttle-debounce-plugin

标签： javascript function throttling onresize

【解决方案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

【讨论】：

这只是将触发事件延迟到事件触发后 250 毫秒。这与在调整大小发生后触发事件不同。
在网络浏览器中你能做的最好的事情就是靠近。看我的例子。

【解决方案2】：

在jQuery网站上有一条resize事件的评论：

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

【讨论】：

@user763349：试试下面的代码。在 IE 和 Chrome 中，当您移动窗口的边框时，符号会一个接一个地出现，但在 Opera 中，只有当您停止调整大小时，所有几个符号才会出现。 <html><head> <script type="text/javascript"> window.onresize = function(){ document.getElementById('field').value += "A" } </script> </head> <body> <textarea id='field' cols=70 rows=15>A</textarea> </body></html>
我最终使用 jQuery 而不是传统的 JavaScript 方法。

【解决方案3】：

在调整大小时您不会触发该事件，因为在调整大小发生之前该事件不会触发。

MDN Reference:

**NOTE:**

The resize event is fired after the window has been resized.

【讨论】：

这并不完全正确。大多数浏览器会在定期调整大小期间触发它（包括 Firefox）。我刚查了一下，我有几个 JS 应用在调整大小期间接收事件。
我喜欢看你的例子。我刚刚在 webkit 和 firefox 中尝试过它，当然，在你调整它的大小之前它不会触发。 jsfiddle.net/Dr7dh
可能是 jsfiddle 破坏了它：pastehtml.com/view/b2ja2yrd4.html
不。在尝试 jsFiddle 之前在本地页面上尝试过。刚刚尝试了你的例子，它做了同样的事情。不直到调整大小后才触发。注意这与释放鼠标按钮后不同。
你用的是什么浏览器？使用 Firefox 5，我在移动鼠标时收到多个事件。我知道这从 FF3.0 开始就有效，因为我在 Dojo 中开发 web 应用程序已经使用了几年。