题
如果我有此
window.onresize = function() {
alert('resized!!');
};
我的功能被炒鱿鱼多次的整个的调整大小,但我想捕捉的大小调整的的完成的。这是在IE中。
任何想法?有各种各样的想法在那里,但目前为止工作对我来说(例如IE的应该window.onresizeend事件。)
解决方案
在这种情况下,我会的强烈强>建议去抖动。最简单,有效,可靠的方式在JavaScript可以做到这一点,我发现是本Alman的jQuery插件,油门/防抖动。(可带或不带jQuery的使用 - 我知道......听起来很奇怪)
通过去抖动,代码来执行,这将是简单:
$(window).resize($.debounce(1000, function() {
// Handle your resize only once total, after a one second calm.
...
}));
希望能帮助别人。 ;)
其他提示
我一直用这个。该呼叫setTimeout
和clearTimeout
是对大小调整的速度,任何noticable影响没有,所以它不是一个问题,即这些被称为多次。
var timeOut = null;
var func = function() { /* snip, onresize code here */};
window.onresize = function(){
if(timeOut != null) clearTimeout(timeOut);
timeOut = setTimeout(func, 100);
}
这是不完美,但它应该给你你需要的启动。
var initialX = null;
var initialY = null;
var lastResize = null;
var waiting = false;
var first = true;
var id = 0;
function updateResizeTime()
{
if (initialX === event.clientX && initialY === event.clientY)
{
return;
}
initialX = event.clientX;
initialY = event.clientY;
if (first)
{
first = false;
return;
}
lastResize = new Date();
if (!waiting && id == 0)
{
waiting = true;
id = setInterval(checkForResizeEnd, 1000);
}
}
function checkForResizeEnd()
{
if ((new Date()).getTime() - lastResize.getTime() >= 1000)
{
waiting = false;
clearInterval(id);
id = 0;
alert('hey!');
}
}
window.onresize = function()
{
updateResizeTime();
}
您得到多个事件,因为真的有多个事件。窗户做几次,你拖动窗口(默认情况下,您可以在注册表中,我认为改变它)动画调整大小。
你可以做的是增加一个延迟。做一个clearTimeout,setTimout(myResize,1000)每次IE事件触发。然后,只有最后一个会做实际的调整大小。
不知道这是否会帮助,但因为它似乎是完美的工作,在这儿呢。 我从以前的帖子所采取的片段,并稍加修改它。功能doCenter()首先转换至PX EM和比substracts对象的宽度,并且将通过2剩余部分中的结果被指定为左余量。 doCenter()被执行,以居中的对象。超时火灾时,被调整大小的窗口执行doCenter()一次。
function doCenter() {
document.getElementById("menuWrapper").style.position = "fixed";
var getEM = (window.innerWidth * 0.063);
document.getElementById("menuWrapper").style.left = (getEM - 40) / 2 + "em";
}
doCenter();
var timeOut = null;
var func = function() {doCenter()};
window.onresize = function(){
if (timeOut != null) clearTimeout(timeOut);
timeOut = setTimeout(func, 100);
};
简单纯javascript溶液,只是改变1000 int值更多的响应性较低
var resizing = false;
window.onresize = function() {
if(resizing) return;
console.log("resize");
resizing = true;
setTimeout(function() {resizing = false;}, 1000);
};
我喜欢皮姆雅格优雅的解决方案,但我认为有在最后一个额外的括号,我认为也许setTimeout的应该是“超时= setTimeout的(FUNC,100);”
下面是一个使用道场(假定一个函数定义了称为demo_resize())...
我的版本var _semaphorRS = null; dojo.connect(window,"resize",function(){ if (_semaphorRS != null) clearTimeout(_semaphorRS); _semaphorRS = setTimeout(demo_resize, 500); });
注意:在我的版本尾随括号需要