how to convert a for loop in java script to asynchronous

Question

I want to convert a for-loop used in JavaScript to asynchronous format in order to remove the script not responding error while running in browsers. My code is given below:

links.Timeline.prototype.stackItemsCheckOverlap = function(items, itemIndex,
    itemStart, itemEnd) {

    var eventMargin = this.options.eventMargin, 
          collision = this.collision;

    var item1 = items[itemIndex];

    //for loop that I want to change as asynchronous
    for (var i = itemEnd; i >= itemStart; i--) {

        var item2 = items[i];
        if (collision(item1, item2, eventMargin)) {
            if (i != itemIndex) {
            return item2;
        }
    }
}

possible duplicate of [Asynchronous for cycle in JavaScript](http://stackoverflow.com/questions/4288759/asynchronous-for-cycle-in-javascript) — Kangcor, Feb 06 '15 at 08:32
can use a `setTimeout(myfunction, 0);` to defer the call of a function, but don't know if that could solve your problem. — Hacketo, Feb 06 '15 at 08:33
Take a look at this [other stackoverflow question](http://stackoverflow.com/questions/4288759/asynchronous-for-cycle-in-javascript) — Kangcor, Feb 06 '15 at 08:33

Joseph · Answer 1 · 2015-02-06T09:24:48.990

1

You can use a timer so that it internally defers executions. Here's an example:

function asyncLoop(array, callback){
  var i = 0;
  var timer = setInterval(function(){
    callback.call(array, array[i]);
    if(++i === array.length) clearInterval(timer);
  }, 0);
}

asyncLoop([1,2,3], function(item){
  // this will run per item but will not block execution
});

edited Feb 06 '15 at 09:24

answered Feb 06 '15 at 08:34

Joseph

117,725
30
181
234

score 0 · Answer 2 · edited May 23 '17 at 12:08

Possible duplication: JavaScript and Threads

You would want to use a worker for background tasks.

Read more: http://www.w3schools.com/html/html5_webworkers.asp

Here's an example that is related to your case:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <script id="worker1" type="javascript/worker">
            self.onmessage = function(e) {
                // Whatever you want to run in background, for example
                for (var i = 0; i < 100; i++) {
                    console.log(i);
                }
                self.postMessage(0); // Post back a message, to close the worker
            }
        </script>

        <script>
            function run_task() {
                if (typeof(Worker) != "undefined") {
                    // Here I am using a blob so I can run worker without using a separate file. It works on Chrome, but may not work on other browsers
                    var blob = new Blob([document.querySelector('#worker1').textContent], { type: "text/javascript" });
                    var worker = new Worker(window.URL.createObjectURL(blob));
                    worker.onmessage = function(e) {
                        worker.terminate(); // Close the worker when receiving the postback message
                    }
                    worker.postMessage(1); // Start the worker. You can also use this function to pass arguments to the worker script.
                } else {
                    // You browser does not support Worker
                }
            }
            run_task(); // Run the function. You probably want to trigger this somewhere else
        </script>
    </body>
</html>

References: https://stackoverflow.com/a/6454685/2050220

how to convert a for loop in java script to asynchronous

2 Answers2