jQuery，while循环在后台运行，同时while循环

Question

1) How make that while loop would run in background, and the webpage would respond to user clicks despite while loop. 1）如何使while循环在后台运行，并且尽管while循环，网页也会响应用户的点击。 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. 如果启动字符生成while循环，则无法将数据输入到“输入”，因为生成循环占用了所有资源。 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. 2）如何使多个jquery while循环同时运行，另外，网页应具有响应性，并且用户可以访问。

<!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>

Answer 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. 如果正在执行DOM操作，则不能在后台运行while循环，因为浏览器JavaScript中只有一个主UI线程。

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. 持续添加其他计时器以每500毫秒调用一次该代码。 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 ，然后在其中的代码根据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. 您可以选择其中的几种，但是如果您有很多，您可能会考虑减少数量，而让它们每次只做一件事情。

Answer 2

This is a working example for a program prompting user to input characters utilizing setInterval function instead of while loop . 这是一个程序的工作示例，该程序提示用户使用setInterval函数而不是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>

jQuery，while循环在后台运行，同时while循环

问题描述

2 个解决方案

解决方案1
1 2016-05-15 16:27:37

解决方案2
0 2016-05-15 19:27:54

jQuery，while循环在后台运行，同时while循环

问题描述

2 个解决方案

解决方案1 1 2016-05-15 16:27:37

解决方案2 0 2016-05-15 19:27:54

解决方案1
1 2016-05-15 16:27:37

解决方案2
0 2016-05-15 19:27:54