Javascript Loop mit Sleep

Question

Ich habe eine Gridview und eine Dropdown-Liste in meinem ASP in der C# Ich habe Funktionalität, die es dem Benutzer erlaubt zu wählen, welche Dropdown-Element für jede Gridview-Zeile gelten wird.

Also in der JavaScript möchte ich Slideshow wie Funktionalität für jedes Dropdown-Listenelement und zählen, wie viele Gridview Zeilen dieses Element enthalten.

Ich versuche, den Code zu bekommen mit konstanter Geschwindigkeit (2 Sekunden pro Dropdownlist Artikel)

Unten ist mein 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 nicht wie das funktionieren zu laufen ...

Die Sprache ist single-threaded, was bedeutet, dass, wenn Sie für zwei Sekunden schlafen alles gesperrt ist, während Sie tun. Dazu gehört Ihr aktuelles Fenster - alles, was Sie auf dem Bildschirm zeichnen möchten.

In vielen Browser alle Windows einfrieren.

Hier müssen Sie ereignisgesteuert programmieren, wo Sie ein Ereignis auslösen, um die nächste Lüge zu zeichnen.

Es gibt eine Reihe von Workarounds je nachdem, ob Sie ES7 await/async durch einen Cross-Compiler verwenden können, oder wenn Sie Promise s des ES6 nutzen können. Schließlich ES5 gibt Ihnen setTimeout

What is the JavaScript version of sleep()?

Answer 2

Wenn Sie einige Zeit in JS warten wollen, können Sie Looping nicht halten, da es Thread blockieren würde.
Sie könnten stattdessen setTimeout Methode verwenden oder Sie können Window.requestAnimationFrame() Methode verwenden, würde es in Ihrem aktuellen Code besser passen.

Hier Entwurf (modifiziert von MDN Beispielcode)

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() - Dieser Aufruf Methode bei jedem Rahmen und es ist Browser freundliche API (nicht Seiten-Rendering Leistung beeinträchtigen).
Es hat ein Argument: Zeitstempel, Browser-System würde den aktuellen Zeitstempel automatisch übergeben.
wie folgt aussehen: 55378.47799999872 55395.189000002574 55411.900000006426 ....
Dann können Sie die Methode wie rekursiv aufrufen aufrufen.
Wenn Sie aufhören wollen, rufen Sie einfach die Methode nicht auf.