在页面开发中,我们有的时候需要在窗口大小发生变化的时候触发一下页面的显示刷新,例如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
//.....................
});