DOM onresize 事件
如果我有这个,
window.onresize = function() {
alert('resized!!');
};
我的函数在调整大小过程中会被多次触发,但我想捕获调整大小的完成情况。这是在IE中。
有什么想法吗?有各种各样的想法,但到目前为止还没有对我有用(例如 IE 的假定 window.onresizeend 事件。)
If I have this
window.onresize = function() {
alert('resized!!');
};
My function gets fired multiple times throughout the resize, but I want to capture the completion of the resize. This is in IE.
Any ideas? There are various ideas out there, but not has worked for me so far (example IE's supposed window.onresizeend event.)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(7)
在这种情况下,我强烈建议去抖。我发现在 JavaScript 中执行此操作的最简单、有效且可靠的方法是 Ben Alman 的 jQuery 插件 Throttle/Debounce(可以与或不与 jQuery 一起使用 - 我知道......听起来很奇怪)。
通过去抖动,执行此操作的代码将非常简单:
希望可以帮助某人。 ;)
In this case, I would strongly suggest debouncing. The most simple, effective, and reliable way to do this in JavaScript that I've found is Ben Alman's jQuery plugin, Throttle/Debounce (can be used with or without jQuery - I know... sounds odd).
With debouncing, the code to do this would be as simple as:
Hope that can help someone. ;)
当我想在调整大小后做某事时,我总是使用这个。对
setTimeout
和clearTimeout
的调用对调整大小的速度没有任何明显的影响,因此多次调用它们并不是问题。I always use this when I want to do something after resizing. The calls to
setTimeout
andclearTimeout
are not of any noticable impact on the speed of the resizing, so it's not a problem that these are called multiple times.这并不完美,但它应该为您提供所需的开始。
This is not perfect but it should give you the start you need.
你会得到多个事件,因为确实有多个事件。 Windows 通过在拖动窗口时多次执行调整大小的动画(默认情况下,我认为您可以在注册表中更改它)。
你可以做的就是添加一个延迟。每次 IE 事件触发时执行一次clearTimeout、setTimout(myResize,1000)。然后,只有最后一个会进行实际的调整大小。
You get multiple events because there really are multiple events. Windows animates the resize by doing it several times as you drag the window (by default, you can change it in the registry I think).
What you could do is add a delay. Do a clearTimeout, setTimout(myResize,1000) every time the IE event fires. Then, only the last one will do the actual resize.
简单的纯 JavaScript 解决方案,只需将 1000 int 值更改为更低即可获得更高的响应能力
simple pure javascript solution, just change the 1000 int value to be lower for more responsiveness
不确定这是否有帮助,但由于它似乎运行良好,所以就在这里。
我从上一篇文章中摘取了片段并稍作修改。函数 doCenter() 首先将 px 转换为 em,然后减去对象的宽度,并将余数除以 2。结果指定为左边距。执行 doCenter() 以使对象居中。当再次执行 doCenter() 调整窗口大小时会触发超时。
Not sure if this might help, but since it seems to be working perfectly, here it is.
I have taken the snippet from the previous post and modified it slightly. The function doCenter() first translates px to em and than substracts the width of the object and divides the remainder by 2. The result is assigned as left margin. doCenter() is executed to center the object. timeout fires when the window is resized executing doCenter() again.
我喜欢 Pim Jager 的优雅解决方案,尽管我认为末尾有一个额外的括号,并且我认为 setTimeout 应该是“timeOut = setTimeout(func,100);”
这是我使用 Dojo 的版本(假设定义了一个名为 demo_resize() 的函数)...
注意:在我的版本中,需要尾随括号。
I liked Pim Jager's elegant solution, though I think that there's an extra paren at the end and I think that maybe the setTimeout should be "timeOut = setTimeout(func,100);"
Here's my version using Dojo (assuming a function defined called demo_resize())...
Note: in my version the trailing paren IS required.