所以我目前使用的是:
$(window).resize(function(){resizedw();});
但是在调整大小过程中,这个函数会被调用很多次。是否有可能在事件结束时捕获事件?
所以我目前使用的是:
$(window).resize(function(){resizedw();});
但是在调整大小过程中,这个函数会被调用很多次。是否有可能在事件结束时捕获事件?
当前回答
我采取了稍微不同的策略,依赖于mouseUp作为调整大小事件的结束。trackSize在documentReady上被调用,然后也设置了wide的初始值。
var THRESHOLD = 784;
var TALL = 125, SHORT = 50;
var wide = (window.document.body.clientWidth >= THRESHOLD );
function trackSize() {
if( !wide ) {
setHeight( TALL );
} else {
setHeight( SHORT );
}
parent.window.addEventListener('resize', onResize);
}
function onResize(e) {
parent.window.removeEventListener('resize', onResize);
parent.window.addEventListener('mouseup', onMouseUp) ;
}
function onMouseUp(e) {
parent.window.removeEventListener('mouseup', onMouseUp);
wide = (window.document.body.clientWidth >= THRESHOLD);
trackSize();
}
在设置了窗口的初始高度之后,我们开始监听调整大小事件。当它开始时,我们停止监听并开始监听mouseUp事件。因此,我们知道mouseUp将结束调整大小。在mouseUp中,我们停止监听并根据窗口的宽度设置切换,然后循环回trackSize。
trackSize首先根据切换设置窗口的高度——如果低于阈值,则增加高度(因为Bootstrap列的堆栈宽度较小),否则设置为标准。然后我们再听下一个调整大小的事件。
注意:这个解决方案并不真正适用于使用最大化或恢复窗口按钮立即调整大小。也许添加一个像isMouseDown这样的测试并绕过鼠标监听器就足够了——我还没有测试过。
其他回答
这适用于我,因为我不想使用任何插件。
$(window).resize(function() {
var originalWindowSize = 0;
var currentWidth = 0;
var setFn = function () {
originalWindowSize = $(window).width();
};
var checkFn = function () {
setTimeout(function () {
currentWidth = $(window).width();
if (currentWidth === originalWindowSize) {
console.info("same? = yes")
// execute code
} else {
console.info("same? = no");
// do nothing
}
}, 500)
};
setFn();
checkFn();
});
在窗口重新大小调用“setFn”获得窗口的宽度,并保存为“originalWindowSize”。然后调用“checkFn”,在500ms(或您的首选项)后获得当前窗口大小,并将原始窗口与当前窗口进行比较,如果它们不相同,则窗口仍在重新调整大小。不要忘记在生产环境中删除控制台消息,并且(可选)可以使“setFn”自动执行。
您可以将引用id存储到任何setInterval或setTimeout。是这样的:
var loop = setInterval(func, 30);
// some time later clear the interval
clearInterval(loop);
要在不使用“全局”变量的情况下做到这一点,可以向函数本身添加一个局部变量。例:
$(window).resize(function() {
clearTimeout(this.id);
this.id = setTimeout(doneResizing, 500);
});
function doneResizing(){
$("body").append("<br/>done!");
}
这是我用来延迟重复操作的,它可以在你的代码中的多个地方调用:
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
用法:
$(window).resize(function () {
debounce(function() {
//...
}, 500);
});
窗口的ResizeStart和ResizeEnd事件
http://jsfiddle.net/04fLy8t4/
我实现了一个函数,它在用户DOM元素上触发两个事件:
调整大小开始 调整大小结束
代码:
var resizeEventsTrigger = (function () {
function triggerResizeStart($el) {
$el.trigger('resizestart');
isStart = !isStart;
}
function triggerResizeEnd($el) {
clearTimeout(timeoutId);
timeoutId = setTimeout(function () {
$el.trigger('resizeend');
isStart = !isStart;
}, delay);
}
var isStart = true;
var delay = 200;
var timeoutId;
return function ($el) {
isStart ? triggerResizeStart($el) : triggerResizeEnd($el);
};
})();
$("#my").on('resizestart', function () {
console.log('resize start');
});
$("#my").on('resizeend', function () {
console.log('resize end');
});
window.onresize = function () {
resizeEventsTrigger( $("#my") );
};
Mark Coleman的答案当然比所选的答案要好得多,但如果你想避免超时ID的全局变量(Mark回答中的doit变量),你可以做以下其中之一:
(1)使用立即调用的函数表达式(IIFE)来创建闭包。
$(window).resize((function() { // This function is immediately invoked
// and returns the closure function.
var timeoutId;
return function() {
clearTimeout(timeoutId);
timeoutId = setTimeout(function() {
timeoutId = null; // You could leave this line out.
// Code to execute on resize goes here.
}, 100);
};
})());
(2)使用事件处理函数的属性。
$(window).resize(function() {
var thisFunction = arguments.callee;
clearTimeout(thisFunction.timeoutId);
thisFunction.timeoutId = setTimeout(function() {
thisFunction.timeoutId = null; // You could leave this line out.
// Code to execute on resize goes here.
}, 100);
});