Straight Tips: [JavaScript] Real and Fake Multi-Thread. (Prevent Loop From Freezing The Browser)

Monday, April 21, 2025

[JavaScript] Real and Fake Multi-Thread. (Prevent Loop From Freezing The Browser)

The below codes are examples on how to prevent Loop from freezing the browser by using either Real or Fake Multi-Thread.

Since Real Multi-Thread is faster than Fake Multi-Thread, always use Real Multi-Thread if possible!

Test codes below (Click here)

Real Multi-Thread (Async Function with Web Worker):

<!DOCTYPE html>

https://stackoverflow.com/questions/5408406/web-workers-without-a-separate-javascript-file?page=1&tab=scoredesc#tab-top
<br><br>

Current: <span id="Current">  </span><br><br>
Status: <span id="Status"></span><br><br>
<input type="button" value="Start" onclick='Big_Op();'>
<input type="button" value="Stop" onclick='Big_Op("Stop")'><br><br>

X = <span id="x_count">0</span> <input type="button" value="X++"
onclick='document.getElementById("x_count").innerText = ++x;'> <br><br>

<span id="Output"></span><br><br>

<script id="Big_Op_Script" type="javascript/worker">

    // This script won't be parsed by JS engines because its type is javascript/worker.

for(i = 0; i <= 299001; i++){postMessage(["Running", i])};

postMessage(["Finished"])

</script>


<script>

x = 0;

document.getElementById("Output").innerText += "Before async function" + "\n\n";

Big_Op();

document.getElementById("Output").innerText += "After async function" + "\n\n";

function Big_Op(Option) {    //________________________

     if (Option === "Stop"){
     Big_Op.Worker.terminate(); 
     Big_Op.Worker = undefined;
     document.getElementById("Status").innerHTML = "Aborted";
     return;
     }

if (Big_Op.Worker !== undefined){return}

var blob = new Blob([document.querySelector('#Big_Op_Script').textContent], { type: "text/javascript" })

            // Note: window.webkitURL.createObjectURL() in Chrome 10+.
Big_Op.Worker = new Worker(window.URL.createObjectURL(blob));

    Big_Op.Worker.onmessage = function(e) {

    if (e.data[0] === "Running"){document.getElementById("Current").innerHTML = e.data[1]}

         if (e.data[0] === "Finished"){

         Big_Op.Worker = undefined;

         document.getElementById("Status").innerHTML = "Done"; 

         document.getElementById("Output").innerText += "Finished Looping \n\n";
         }

    }

document.getElementById("Status").innerHTML = "Running";
}

</script>

Fake Multi-Thread (Async Function with Sleep):

<!DOCTYPE html>

<span id="status"></span> _ (<span id="count"></span>)<br>
<input type="button" value="Start" onclick='Big_Op_Stop = false; Big_Operation()'>
<input type="button" value="Stop" onclick='Big_Op_Stop = true'><br><br>

X = <span id="x_count">0</span> <input type="button" value="X++" 
onclick='document.getElementById("x_count").innerText = ++x;'> <br><br>

<span id="Output"></span><br>

<script>

x = 0;

Big_Op_Stop = false;

Output_el = document.getElementById("Output");

Output_el.innerText += "1" + "\n\n";
Output_el.innerText += "2" + "\n\n";
Output_el.innerText += "Before async function" + "\n\n";

Big_Operation();

Output_el.innerText += "After async function" + "\n\n";

async function Big_Operation(){    //___________________________________________________________

    //"async" above is a must for "await" below to work, otherwise, error!

document.getElementById("status").innerText = "This Operation will take long, please wait!!!"; 

    var Sleep_i = 0;

    var Big_Op_i = 0;

    for(; Big_Op_i <= 9001001; Big_Op_i++){

    document.getElementById("count").innerText = Big_Op_i;

    if (Big_Op_Stop === true){document.getElementById("status").innerText = "Aborted"; return;}

          Sleep_i++;
          if (Sleep_i >= 11001){    //the higher this value is, the faster the loop will finish (but the browser may freeze)
          var Sleep_i = 0;
          await Sleep(0);           //"0" execute "immediately" (This will allow other codes to be executed and prevents browser from freezing)
          }
    }

Output_el.innerText += "Finished Looping _ " + Big_Op_i + "\n\n";

document.getElementById("status").innerText = "Finhished!!!"; 
}

function Sleep(Time) {    //_____________________________

    return new Promise((resolve) => {

    setTimeout(() => {resolve("Sleep End");}, Time);    //1000 millisecond = 1 Second

    });

}

</script>

Straight Tips

jQuery

elevateZoom (Requires jQuery)

Microsoft Store (Donation)

Facebook Messenger (Donation)

Activation Code - Donation (Multiple Options)

Request Web\PHP\JavaScript\HTML Project !

Advertise On This Blog!

Ads (Reserved)

Monday, April 21, 2025

[JavaScript] Real and Fake Multi-Thread. (Prevent Loop From Freezing The Browser)

No comments:

Post a Comment

ADS - Multi Share Calculator