onresize IE中多次執行問題
來源:程序員人生 發布時間:2013-11-14 18:25:21 閱讀次數:3208次
頁面上給window對象定義其onresize事件,在拉伸縮小窗口時,其onresize方法將被執行多次,影響頁面性能。
網上查了些資料,說是在ie和opera中,只要窗口的邊框移動一個像素,resize事件就觸發;而在mozilla中,只在停止對窗口的大小改變時才觸發resize 事件。
停止窗口大小改變時觸發resize事件才是比較理想的。
我覺得onresize的觸發是這樣的:按照一個很短的間隔來判斷,當你把200*200的窗口拖到200*400的時候中間要經過幾次resize,從而觸發幾個onresize.
要避免多次onresize觸發引起某個代碼執行多次的不良后果,可以自己寫個函數,在onresize之后間隔一個時間值(setTimeout)再調用你要執行的代碼,通過置狀態變量判斷是否要執行,如果兩次onresize的時間間隔小于100ms,就再setTimeout,等等看。
<script type="text/javascript">
var resizeTimer = null;
function doResize(){
alert("width="+document.documentElement.clientWidth + " Height="+document.documentElement.clientHeight);
resizeTimer=null
}
window.onresize = function(){
if(resizeTimer==null){
resizeTimer = setTimeout("doResize()",300);
}
}
</script>
生活不易,碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈