window.onresize：サイズ変更中に関数を実行すると、サイズ変更が完了したとき

Question

JavaScriptを初めて使用しています。私は、ユーザーがウィンドウのサイズを変更した後に、関数を発生させるonresize関数を作成する方法と、別の関数を作成する方法を理解しようとしています。ほとんどの場合、セッションタイムアウトが発生します。

基本機能の作成に関するアイデアはありますか？

<script type="text/javascript"> 
    window.onresize = function() { 
    // The first function goes here while resizing is happening 
    // Then function 2 occurs when window resizing is finished by the user 
    }  
</script> 

ここでは、私が試みているものの修正版です。目標は、ページがサイズ変更されている間に、メインのカプセルdivをページ上に隠すことです。当初、onresizeイベントがトリガされたとき、divの可視性がオンになり、「情報を処理している間お待ちください」という待機画面になります。

スクリプト経験：

var resizeTimeout; 
window.onresize = function() { 
     clearTimeout(resizeTimeout); 
     document.getElementById("loading").className = "loading-visible"; 
     document.getElementById('XXXDIV').style.visibility = 'hidden'; 
      for (var h = 1; h < 40; h++) 
       { 
       document.getElementById('DesignXXX' + h).style.visibility = 'hidden'; 
       } 
    resizeTimeout = setTimeout(function() { 
      var hideDiv = function(){document.getElementById("loading").className = "loading-invisible";}; 
      var oldLoad = window.onload; 
      var newLoad = oldLoad ? function(){hideDiv.call(this);oldLoad.call(this);} : hideDiv; 
      location.reload(true) = newLoad; 
      document.getElementById('XXXDIV').style.visibility = 'visible'; 
      for (var h = 1; h < 40; h++) 
       { 
       document.getElementById('DesignXXX' + h).style.visibility = 'visible'; 
       } 
    }, 2000); // set for 1/4 second. May need to be adjusted. 
}; 

</script> 

Answer 1

yのウェブサイトイベントのサイズを変更するにはコメントがあります：

実装によっては、サイズ変更が進行中であるなどのイベントが連続して送信することができます（Internet ExplorerやなどのSafariやChromeなどのWebKitベースのブラウザでの典型的な行動を）サイズを変更、またはリサイズ操作の終了時に1回だけ（Operaなどの他のブラウザでの典型的な動作）。

Answer 2

あなたはイベントがサイズ変更が行われた後までは発生しませんので、リサイズが起こっている間に起動するようにそのイベントを取得するつもりはありません。

MDN Reference:

**NOTE:**

The resize event is fired after the window has been resized.

Answer 3

これはそれを行う必要があります。

var resizeTimeout; 
window.onresize = function() { 
     clearTimeout(resizeTimeout); 
     // handle normal resize 
     resizeTimeout = setTimeout(function() { 
      // handle after finished resize 
     }, 250); // set for 1/4 second. May need to be adjusted. 
    }; 

ここで懐疑のための作業例です：jQuerオンhttp://pastehtml.com/view/b2jabrz48.html