所以我目前使用的是:
$(window).resize(function(){resizedw();});
但是在调整大小过程中,这个函数会被调用很多次。是否有可能在事件结束时捕获事件?
所以我目前使用的是:
$(window).resize(function(){resizedw();});
但是在调整大小过程中,这个函数会被调用很多次。是否有可能在事件结束时捕获事件?
当前回答
下面是一个非常简单的脚本,可以在窗口对象上触发'resizestart'和'resizeend'事件。
没有必要在日期和时间上浪费时间。
变量d表示在触发调整大小结束事件之前,调整大小事件之间的毫秒数,您可以使用它来更改结束事件的灵敏度。
要收听这些事件,你所需要做的就是:
resizestart: $(窗口)。on(' Resize Start ', function(event){console.log('Resize Start!');});
resizeend: 美元(窗口)。on('resizeend', function(event){console.log(' resizeend !');});
(function ($) {
var d = 250, t = null, e = null, h, r = false;
h = function () {
r = false;
$(window).trigger('resizeend', e);
};
$(window).on('resize', function (event) {
e = event || e;
clearTimeout(t);
if (!r) {
$(window).trigger('resizestart', e);
r = true;
}
t = setTimeout(h, d);
});
}(jQuery));
其他回答
窗口的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") );
};
我采取了稍微不同的策略,依赖于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这样的测试并绕过鼠标监听器就足够了——我还没有测试过。
有一个比计算两次调用之间的增量时间更简单的方法来在调整大小结束时执行函数,简单地像这样做:
var resizeId;
$(window).resize(function() {
clearTimeout(resizeId);
resizeId = setTimeout(resizedEnded, 500);
});
function resizedEnded(){
...
}
和Angular2的等价函数:
private resizeId;
@HostListener('window:resize', ['$event'])
onResized(event: Event) {
clearTimeout(this.resizeId);
this.resizeId = setTimeout(() => {
// Your callback method here.
}, 500);
}
对于angular方法,在setTimeout中使用()=>{}符号来保留作用域,否则你将无法进行任何函数调用或使用它。
你可以使用setTimeout()和clearTimeout()配合jQuery.data:
$(window).resize(function() {
clearTimeout($.data(this, 'resizeTimer'));
$.data(this, 'resizeTimer', setTimeout(function() {
//do something
alert("Haven't resized in 200ms!");
}, 200));
});
更新
我写了一个扩展来增强jQuery的默认on (& bind)事件处理程序。如果事件在给定的时间间隔内没有触发,它将一个或多个事件的事件处理程序函数附加到选定的元素。如果您希望仅在延迟之后触发回调,例如resize事件或其他,则这非常有用。 https://github.com/yckart/jquery.unevent.js
;(function ($) {
var methods = { on: $.fn.on, bind: $.fn.bind };
$.each(methods, function(k){
$.fn[k] = function () {
var args = [].slice.call(arguments),
delay = args.pop(),
fn = args.pop(),
timer;
args.push(function () {
var self = this,
arg = arguments;
clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(self, [].slice.call(arg));
}, delay);
});
return methods[k].apply(this, isNaN(delay) ? arguments : args);
};
});
}(jQuery));
像使用其他on或bind-event处理程序一样使用它,除了你可以传递一个额外的参数作为last:
$(window).on('resize', function(e) {
console.log(e.type + '-event was 200ms not triggered');
}, 200);
http://jsfiddle.net/ARTsinn/EqqHx/
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);
});