Is Setinterval Handler Called While My Script Running?

June 27, 2023 Post a Comment

I planned to use setInterval to simply set a variable to false, which would be inspected by the main loop to stop. Example (note: this is an example only, the acutal code is not a

Solution 1:

If it's not possible with setInterval, is there any alternative to this, without any modification in the "long to execute" code itself?

One possibility is to make that a web worker rather than trying to use it on the UI thread. Despite people repeatedly saying so, JavaScript is not single-threaded (JavaScript, the language, is silent on the subject), not even on browsers anymore. In the browser environment, there is one main UI thread, but you can spawn other worker threads (web workers). The worker(s) and the main UI code can communicate via postMessage / onmessage.

Here's an example of a web worker in action. This page uses JavaScript on the UI thread to start a web worker, which runs on a separate thread. The worker runs for 10 seconds, busily updating a counter (this is just to simulate a long-running, calculation-intensive process), and sends updates to the UI thread every second:

Main page:

<!doctype html><html><head><metacharset="UTF-8"><title>Worker Example</title><styletype="text/css">body {
    font-family: sans-serif;
}
</style><metacharset="UTF-8"></head><body><script>
(function() {
    var worker = newWorker("worker.js");
    worker.onmessage = function(e) {
        display("Worker says " + e.data);
    };
    display("Starting worker");
    worker.postMessage("start");

    functiondisplay(msg) {
        var p = document.createElement('p');
        p.innerHTML = String(msg);
        document.body.appendChild(p);
    }
})();
</script></body></html>

worker.js:

this.onmessage = function(e) {
    var counter, lastUpdate, now;

    if (e.data === "start") {
        // Loop without yeilding for 10 seconds, sending updates// to the UI every second.
        start = lastUpdate = Date.now();
        counter = 0;
        do {
            ++counter;
            now = Date.now();
            if (now - lastUpdate > 1000) {
                lastUpdate = now;
                this.postMessage(counter);
            }
        }
        while (now - start < 10000);
        this.postMessage("Done");
    }
};

(You're not required to make the worker wait for a message to start, but it's fairly common.)

Solution 2:

The problem is that Javascript is single-threaded. Rewrite your while loop to use setInterval itself and everything should work, since you will release the thread at the end of each loop.

Solution 3:

You should use setTimeout or setInterval instead while loop. JS runs in single thread, so infinite loop will freeze your browser.

var running = true;
setInterval(function(){
   if(running){
      console.log('Stopping now!');
      running = false;
   }
}, 100);

(functionloop(){
    // Do yours loop stuffif( running ){
       setTimeout(loop, 0);
    }
})();

Solution 4:

You should consider using Worker or writing asynchronous code.

Or you can modify your code.

var running = true;
var past = Date.now();
while (running) {
    // do heavy calculations ...if ((Date.now() - past) > 10) {
        running = false;
    }
}

Of course, blocking loops aren't good idea, but I don't see good way to satisfy requirement:

If it's not possible with setInterval, is there any alternative to this, without any modification in the "long to execute" code itself?

Solution 5:

JavaScript runs in a single threaded event loop. What this means is while your code is running no other code can run. This is why your callback does not get executed.

You can workaround this by also making your while(running) be asynchronous. Consider doing the following:

var running = true;
var monitor = setInterval(function () {
  if (running) {
    console.log("Stopping now!");
    running = false;
    clearInterval(monitor);
  }
}, 100);

var work = setInterval(function() {
    if (running) {
        // do something
    } else {
        clearInterval(work);
    }
}, 1);

Don't forget to call clearInterval!

JavaScript Free