睡眠のあるJavascriptループ

Question

私はC＃の私のASPのgridviewとドロップダウンリストを持っています。どのドロップダウンリスト項目を各gridview行に適用するかを選択できる機能があります。

JavaScriptでは、各ドロップダウンリスト項目のスライドショー機能が欲しく、その項目を含むグリッドビューの行数を数えます。私は一貫性の速度で実行するコードを取得しようとしてる

は、（ドロップダウンリストの項目ごとに2秒）

は、以下の私のJavaScript

$(document).ready(function() { 
    loop(); 
}); 

function loop() { 
    var ddl = document.getElementById("cphMain_ddlInc"); 
    for (var j = 1; j < ddl.options.length; j++) { 
     setTimeout(shippedEmbryos(j), 2000); 
    } 
} 

function shippedEmbryos(j) { 
    var st = $("input[id*=txtShipped]"); 
    var grid = document.getElementById("cphMain_gvFertEntry"); 
    var ddl = document.getElementById("cphMain_ddlInc"); 
    var embryos = 0; 
    var ddlValue = ddl.options[j].innerHTML; 
    for (var i = 1; i < grid.rows.length - 1; i++) { 
     if (ddlValue == grid.rows[i].cells[2].innerHTML) { 
      var txtbox = $("input[id*=txtShipped]"); 
      var x = txtbox[i].value; 
      if (x == "") { 
       x = 0; 
      } 
     } 
     else { 
      x = 0; 
     } 
     embryos += parseInt(x); 
    } 
    var label = document.getElementById("cphMain_lblShippedEmbryos"); 
    label.innerHTML = "Embryos Shipped for " + ddlValue + ": " + embryos; 
}; 

Answer 1

JavaScriptがそのように動作しないです...

言語はシングルスレッドです。つまり、2秒間スリープした場合、すべてはロックされています。これには現在のウィンドウが含まれます。これは画面上に描画しようとしているすべてのものです。

多くのブラウザですべて Windowsがフリーズしています。

ここでは、イベントを起動して次の嘘をつくるイベント駆動型プログラミングを行う必要があります。

ES7 await/asyncをクロスコンパイラで使用できるか、ES6のPromiseを使用できるかどうかによって、いくつかの回避策があります。あなたは、あなたはそれがスレッドをブロックしてしまうため、ループ維持することはできませんJSでいくつかの時間を待ちたい場合は最後にES5はあなたsetTimeout

What is the JavaScript version of sleep()?

Answer 2

を与えます。
代わりにsetTimeoutメソッドを使用するか、Window.requestAnimationFrame（）メソッドを使用すると、現在のコードに適した方法になります。ここで

は（MDNのサンプルコードから修正）案

var start; 
function step(timestamp) { 
    var progress; 
    if (start === null) start = timestamp; 
    progress = timestamp - start; 

    // trigger every 2000ms, equal 2s 
    if (progress >= 2000) { 
    //reset start time 
    start = timestamp; 
    // do whatever you want ..., such as call shippedEmbryos() 

    //start another loop 
    requestAnimationFrame(step); 
    } 
} 

MDN:Window.requestAnimationFrame()ある - このメソッドは、すべてのフレームを呼び出し、それが（ページレンダリングのパフォーマンスに影響を与えない）、ブラウザに優しいAPIです。
これは1つの引数を持っています：タイムスタンプ、ブラウザシステムは自動的に現在のタイムスタンプを渡します。
このように表示されます：55378.47799999872 55395.189000002574 55411.900000006426 ....
次に、メソッドを再帰的に呼び出すことができます。
停止したい場合は、単にメソッドを呼び出さないでください。