总有人间一两风,填我十万八千梦

Jquery/JS 窗口大小变化结束事件,resizeend event

其他 Zero、J 1908℃ 0评论

在页面开发中,我们有的时候需要在窗口大小发生变化的时候触发一下页面的显示刷新,例如Canvas的渲染重新自适应问题。直接使用Window的resize事件是一个不错的选择,但是如果我们需要监听RESIZE的元素在IFRAME中时,此时可能会因为父窗口动画问题导致IFRAME大小是动态变化的(比如父窗口是自适应的菜单,菜单存在动画),此时IFRAME元素会收到很多个RESIZE事件,如果在这中情况下我们直接在IFRAME中重新渲染我们需要的元素,就会导致严重的性能问题。

JS中只存在resize事件,这里我们给出一种采用定时器来实现的resizeend方法,代码如下:

var rdate;//用于记录每次触发resize的时间
var timer = null;
var delta = 200;//200ms时间差
$(window).resize(function() {
	rdate = new Date();
	if (timer === null) {
		timer = setTimeout(resizeEnd, delta);
	}
});
function resizeEnd() {
	//再等等~
	if (new Date() - rdate < delta) {
		setTimeout(resizeEnd, delta);
	} else {
		timer = null;
		//trigger 一个resizeend事件
		$(window).trigger("resizeend");
	}               
}
//监听resizeend 
$(window).on("resizeend",function (e) {  
	//......此处处理resizeend
	//.....................
});

转载请注明:悠然品鉴 » Jquery/JS 窗口大小变化结束事件,resizeend event

喜欢 (0)or分享 (0)
发表我的评论
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址