Javascript循環與睡眠

我有一個gridview和一個下拉列表在我的ASP在C＃我有功能，將允許用戶選擇哪個dropdownlist項目將應用於每個gridview行。Javascript循環與睡眠

所以在JavaScript中我想幻燈片顯示每個dropdownlist項目的功能，並計算有多少gridview行包含該項目。

我試圖讓代碼以一致的速度運行（每下拉列表項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; 
};

來源

2016-11-11 MMoore94

在''setTimeout（）''中用''2000''ms調用你的函數？ – Crowes

因此目前它正在運行下拉列表的循環，並且在循環完成之後，每個下拉列表一次運行'shippedembryos（）'一次。所以它沒有按照正確的順序正確運行所有的東西，所以幻燈片部分永遠不會工作。 JavaScript目前只顯示最後一個下拉列表項目 – MMoore94

我進入了調試模式，並且它實際上在頁面加載之前運行它，所以它只顯示最後的結果 – MMoore94

JavaScript不一樣，工作...

該語言是單線程的，這意味着如果你睡了兩秒一切被鎖定，而你這樣做。這包括您當前的窗口 - 您試圖在屏幕上繪製的所有內容。

在許多瀏覽器中全部窗口凍結。

您需要在這裏進行事件驅動的編程，在此您可以觸發事件來繪製下一個謊言。

根據您是否可以通過交叉編譯器使用ES7 await/async或者如果您可以使用ES6的Promise s，有很多解決方法。如果你想等在JS一段時間，你不能保持循環，因爲它會阻止線程最後ES5給你setTimeout

What is the JavaScript version of sleep()?

來源

2016-11-11 15:34:48

。
您可以使用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（不會影響網頁渲染性能）。
它有一個參數：時間戳，瀏覽器系統會自動傳遞當前時間戳。
是這樣的：55378.47799999872 55395.189000002574 55411.900000006426 ....
然後你可以保持調用類似遞歸的方法。
如果你想停止，只是不要調用該方法。

來源

2016-11-11 15:40:50

我在哪裏可以調用這個步驟功能？我可以從我的'$（document）.ready（）'調用它嗎？ – MMoore94

Javascript循環與睡眠

回答

相關問題