jquery, while loop running in the background, simultaneous while loops

Question

1) How make that while loop would run in background, and the webpage would respond to user clicks despite while loop. If I start the characters generating while loop, I am not able to input the data to the "input", because the generating loop occupies all resources. Actually, whenever I click "start", I am getting the message that the webpage is not responding asking if I want to stop it. After choosing "to stop", I see that the characters are generated. Nevertheless, it is very difficult to input the characters to the input field and to stop the program with "stop" trigger, and usually webpage crashes.

2) How to make several jquery while loops to run simultaneously, and additionally, webpage should be responsive and accessible to user.

<!DOCTYPE html>
<html>
    <head>
<script src="theme/assets/js/jquery/jquery-2.2.3.min.js"></script>
    </head>
    <body>
        <div id="Start"> <b> Start </b> </div>
        <div id="Stop"> <b> Stop </b> </div>
        <br><br> <div id="random"> </div>
        <br><br>  <input id="input" type="text" size="500"> 

        <script>
// how to manage without global variables? how to pass variables to the function
        var flag = false;
        var charstr = "zxcvbnm,\.\/asdfghjkl;\'qwertyuiop[]\\`ąčęėįšųū90\-ž";
        var charstrL = charstr.length;

    $("#Start").click( function() {
        $("#lesson").text("clicked Start");
        flag =true;
        $(this).val('flag');
        while(flag){
            setInterval(function() { // this code is executed every 500 milliseconds:
                var rand = Math.random();
                var num =  Math.floor( ( Math.random() * (charstr.length -1) ) );
                $("#lesson").text(charstr[num]);
            }, 500);
        }//while
     }); // $("#Start").click( function() {

    $("#Stop").click( function(){
        flag=false;
        $(this).val('flag');
        alert('clicked Stop');
    }); 

    </script>
  </body>
</html>

@DrewKennedy: No, JavaScript isn't single-threaded. Not even on browsers. JavaScript, the language, is silent on the topic of threading; it's an environment thing. In browsers, there is one main UI thread, and as many web worker threads as you like. — T.J. Crowder
– T.J. Crowder, Commented May 15, 2016 at 16:28
@T.J.Crowder How to do Threading in Javascript Granted this is from 2011, so if something has changed, I'd be more than happy to stand corrected — Drew Kennedy
– Drew Kennedy, Commented May 15, 2016 at 16:29
Who said you can't , you can use web workers for latest browsers htmlgoodies.com/html5/tutorials/… — Suraj Rawat
– Suraj Rawat, Commented May 15, 2016 at 16:30
@DrewKennedy: That answer is incorrect. It was also incorrect in 2011. Moreover, there are already comments on it pointing out that it's incorrect. — T.J. Crowder
– T.J. Crowder, Commented May 15, 2016 at 16:30

T.J. Crowder · Accepted Answer · 2016-05-15 16:27:37Z

1

You can't make a while loop run in the background if it's doing DOM manipulation, because there's only one main UI thread in browser JavaScript.

You also probably don't want to, because this code:

while (flag) {
    setInterval(function() { // this code is executed every 500 milliseconds:
    var rand = Math.random();
    var num =  Math.floor( ( Math.random() * (charstr.length -1) ) );
        $("#lesson").text(charstr[num]);
    }, 500);
}

continuously adds additional timers to call that code every 500ms. In a very short period of time, your browser will become completely non-responsive.

Just set up setInterval, and have the code inside decide whether to run based on flag:

setInterval(function() { // this code is executed every 500 milliseconds:
    if (flag) {
        var rand = Math.random();
        var num =  Math.floor( ( Math.random() * (charstr.length -1) ) );
        $("#lesson").text(charstr[num]);
    }
}, 500);

You can have several of those, though if you have a lot of them you might consider having fewer and just having them do more than one thing each time.

answered May 15, 2016 at 16:27

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

olga Over a year ago

How to implement with while loop. I need constant generation after each 500ms

olga Over a year ago

Is there a way to achieve this with JSON?

olga Over a year ago

Dera Crowder, finally i understood what you wrote. There is no need for while in your example. Thank you so much.

olga Over a year ago

Found [promises] (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…), [p2] (html5rocks.com/en/tutorials/es6/promises) , seems they enable multithreading in js, will write more when understand.

T.J. Crowder Over a year ago

@olga: No, promises don't enable multi-threading in JavaScript, they just bring different (better) semantics to asynchronous operations. Multi-threading is an environment thing, not a language thing (in regard to JavaScript). For example: JavaScript on web browsers is multi-threaded if you use web workers (single-threaded if you don't), multi-threaded on the JVM (e.g., if you're using Rhino or Nashorn), and single-threaded on NodeJS; because that's how each of those environments sets it up.

|

olga · Accepted Answer · 2016-05-15 19:27:54Z

This is a working example for a program prompting user to input characters utilizing setInterval function instead of while loop. The application is to improve the typing skills.

<!DOCTYPE html>
<html>
    <head>
<script src="theme/assets/js/jquery/jquery-2.2.3.min.js">  </script>
    </head>
    <body>

<div id="Start"> <b> Start </b> </div> 

<br><div id="lesson"> </div>
<input id="input" type="text" size="500"> 

<span id="Stop">  Stop  </span>
<span id="Clear"> &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; 
  &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;    Clear     </span>

        <script>
// how to manage without global variables ? how to pass vaiables to the function
        var flag = false;
        var charstr = "zxcvbnm,\.\/asdfghjkl;\'qwertyuiop[]\\`ąčęėįšųū90\-ž";
        var charstrL = charstr.length;

    $("#Start").click( function() {
        flag =true;
        $(this).val('flag');
        if(flag){
            setInterval( function() { // this code is executed every 500 milliseconds:
            if (flag) {
                var rand = Math.random();
                var num =  Math.floor( ( Math.random() * (charstr.length -1) ) );
                $("#lesson").text("\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0"+charstr[num]);
            } //if (flag) {
            }, 500);
        } // if (flag)
     }); // $("#Start").click( function() {     

    /*    
   // does not work, because creates infinite loops, each with 500ms waiting time. 
   // In miliseconds this accumulates to hours and thousands of loops generated usign while
        while(flag){
            setInterval(function() { // this code is executed every 500 milliseconds:
                var rand = Math.random();
                var num =  Math.floor( ( Math.random() * (charstr.length -1) ) );
                $("#lesson").text(charstr[num]);
            }, 500);
        }//while */

   //

    $("#Stop").click( function(){
        flag=false;
        $(this).val('flag');
    }); 


    $("#Clear").click( function(){
        $("#input").val(''); 
        $("#lesson").text(' '); 
    });     

    </script>
  </body>
</html>

Collectives™ on Stack Overflow

jquery, while loop running in the background, simultaneous while loops

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related