Javascript long loops without workers

Question

I require a long loop (long enough to make the browser hang if I used it naively). The contents of this loop requires other javascript files/libraries and I dont like the idea of concatonating them all into one file as this would make it harder to maintain. So (as far as I understand) this rules out web workers, Are there any other solutions out there?

I need the contents of the loop to run as fast as possible so any delay that can be measured in ms is unacceptable, any fixed delay at all would not be ideal.

I might be able to concatonate them all into a blob at runtime and then feed that into a web worker, I havn't really looked into this to far b/c it doesn't seem like a good solution.

Use something like browserify to build your Web worker script from modules. — joews
– joews, Commented Apr 15, 2015 at 13:08
Well at the moment I am running a setInterval(doStuff(), 4); but it is a LOT slower than I would like — jayjay
– jayjay, Commented Apr 15, 2015 at 13:10
You can load other files inside a webworker - it doesn't rule them out. — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Apr 15, 2015 at 13:18
@jayjay that's a different question, but just this once: importScripts("myscriptfile.js"); — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Apr 15, 2015 at 13:22

Community · Accepted Answer · 2020-06-20 09:12:55Z

You will have to use an asynchronous approach for this.

An example is to use a "dispatcher" function which invokes the work for each count and keep tracks of current count. It will make sure the next call is called asynchronous. When done the given callback is invoked.

Example

function startLoop(lFrom, lTo, workFunc, callback) {

    var i = lFrom - 1;

    (function loop() {
       if (++i <= lTo) {
           setTimeout(function() {
               workFunc(i, loop);      // start worker for this count
           }, 9);                      // 9ms delay here - tweak as needed
       }
       else callback();                // done
    })();                              // self-invokes loop
}

Then in the worker function:

function worker(i, callback) {
    // use i for what is needed, then
    callback();                        // will trigger next count
}

And of course, you can do batches instead of invoking a worker function for each count.

For block based approach for more "heavy" data, see also my answer here.

Simple demo below

startLoop(0, 20, worker, function() {alert("done")});

function startLoop(lFrom, lTo, workFunc, callback) {

        var i = lFrom - 1;

        (function loop() {
           if (++i <= lTo) {
               setTimeout(function() {
                   workFunc(i, loop);      // start worker for this count
               }, 9);                      // 9ms delay here - tweak as needed
           }
           else callback();                // done
        })();                              // self-invokes loop
    }

    function worker(i, callback) {
        // use i for what is needed, then
        document.querySelector("div").innerHTML += (i + "...");
        callback();                        // will trigger next count
    }

<div></div>

dizballanze · Accepted Answer · 2015-04-15 13:16:12Z

0

Try to wrap loop body into setTimeout with zero time:

while (some_condition) {
    setTimeout(function(){
        // ... place your code here
    }, 0);
}

edited Apr 15, 2015 at 13:16

answered Apr 15, 2015 at 13:10

dizballanze

1,2678 silver badges18 bronze badges

1 Comment

jayjay Over a year ago

Your brace in in the wrong place, and this seems to hang the browser for me.

Collectives™ on Stack Overflow

Javascript long loops without workers

2 Answers 2

Simple demo below

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Simple demo below

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related