Javascript Loop with Sleep

Question

I have a gridview and a dropdownlist in my ASP in the C# i have functionality that will allow the user to select which dropdownlist item will apply to each gridview row.

so in the JavaScript i want slideshow like functionality for each dropdownlist item and count how many gridview rows contain that item.

I'm attempting to get the code to run at a consistent speed (2 seconds per dropdownlist item)

Below is my 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;
};

Call your function inside a ``setTimeout()`` with ``2000``ms? — Joshua, Nov 11 '16 at 15:20
so at the moment it currently runs through the loop of the dropdownlist and after that loop is complete then runs through `shippedembryos()` one time for each dropdownlist. so its not exactly running everything in the right order so the slideshow portion never works. the javascript is currently only showing the last dropdownlist item — MMoore94, Nov 11 '16 at 15:28
i went in debug mode and its actually running it all before the page even loads... so it only shows the last result — MMoore94, Nov 11 '16 at 16:09

score 0 · Answer 1 · edited May 23 '17 at 12:24

JavaScript doesn't work like that ...

The language is single-threaded, which means that if you sleep for two seconds everything is locked up while you do. That includes your current window -- everything you are trying to draw on screen.

In many browsers all windows freeze.

You need to do event-driven programming here where you fire off an event to draw the next lie.

There are a number of work-arounds depending on if you can use ES7 await/async through a cross compiler or if you can use ES6's Promises. Lastly ES5 gives you setTimeout

What is the JavaScript version of sleep()?

score 0 · Answer 2 · answered Nov 11 '16 at 15:40

If you want to wait some time in JS, you can't keep looping because it would block thread.
You could use setTimeout method instead or you can use Window.requestAnimationFrame() method, it would fit in your current code better.

Here is draft(modified from MDN sample code)

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()- This method call every frame and it is browser friendly API(would not affect page rendering performance).
It has one argument : timestamp, browser system would pass current timestamp in automatically.
look like this: 55378.47799999872 55395.189000002574 55411.900000006426....
Then you can keep call the method like recursive.
If you want to stop, just simply not call the method.

where would i call this step function from? would i call that from my `$(document).ready()` ?? — MMoore94, Nov 11 '16 at 15:47

Javascript Loop with Sleep

2 Answers2