JavaScriptでのSleep,Waitの実装について

概要

JavaScriptで「待たせる」という動作をさせるには、

1. パターン(非推奨)として、
ループを使った操作に応答しにくい状態の待ち(wait/ビジーウェイト/ループウェイト)
がありますが、これはまず使わないほうがいいです。ブラウザが応答できなくなるからです。

2 . パターン(推奨)として、
操作に応答できる状態での待ち(sleep相当)(推奨)を実装するには、
間隔を空けるところで処理のかたまりを関数に分割し、(ステップ分割)、
setTimeoutをかけて次のステップを起動」したり、 「広い間隔でsetIntervalで条件監視を行う」ことで、実現できます。

ブラウザに負担をかけないためには、タイマーを使ったこちらでやるべきです。

  • ある条件を一定間隔で監視し、条件を満たしたら処理を起動する」という、
    条件監視sleep」機能を実装してみましょう。
すべて開くすべて閉じる
  1
 
 setViser(, 条件が満たされたとき起動する関数, 監視間隔 ) ;

と設定できる機能を持った関数を実装します。

動作サンプル

  • 動作サンプル 「ウィンドウの高さが500ピクセル以下になったとき」の条件を監視しています。
    ウィンドウの高さを500以下に操作すると、動作を確認できます。

サンプルソース

すべて開くすべて閉じる
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 
 
 
 
 
 
 
-
|
|
|
|
|
|
|
|
|
|
|
|
!
-
|
|
|
|
!
-
|
|
|
-
|
!
|
!
-
|
|
|
|
|
|
|
|
|
|
|
!
 
 
 
-
-
!
|
|
|
|
-
!
|
!
 
-
!
-
-
!
|
|
|
-
!
|
!
 
-
|
|
-
|
!
!
-
!
-
|
!
 
 
-
!
-
!
 
 
<html><head><title>JavaScriptのsleep,waitサンプル</title></head>
<body>
条件監視sleepでは、「ウィンドウの高さが400ピクセル以下になったとき」の<br>
条件を監視しています。ウィンドウの高さを400以下に操作すると、<br>
動作を確認できます。<br>
<script type="text/javascript">
<!--
///////////////////////////////////////////////////
 
////////////////////////////////////////
//
function loopWait( timeWait )
{
    var timeStart = new Date().getTime();
    var timeNow = new Date().getTime();
    while( timeNow < (timeStart + timeWait ) )
    {
        timeNow = new Date().getTime();
    }
    return;
}
////////////////////////////////////////////
//
//
//
var g_IdViser = new Array(); var g_NumViser = 0;      var g_i = 0;        function setViser( cond , funcCall , timeVise)
{
        strFunc = "" +
          "if(" + cond +"){ " + 
          "clearInterval(g_IdViser[" + g_NumViser + "]);" 
          + funcCall + ";" + 
          "}";
        g_IdViser[g_NumViser] = setInterval( strFunc , timeVise);
    g_NumViser++;
}
 
function step1()
{
        alert();
    loopWait(5000);
    alert();
 
        alert();
    setTimeout( "step2()" , 5000 );
}
function step2()
{
    alert();
    alert();
                 setViser( "document.body.clientHeight <400", "step3()" , 1000 );
}
function step3()
{
    alert();
}
 
 
step1();
//-->
</script>
</body>
</html>