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

Question

1）如何使while循环在后台运行，并且尽管while循环，网页也会响应用户的点击。 如果启动字符生成while循环，则无法将数据输入到“输入”，因为生成循环占用了所有资源。 实际上，每当我单击“开始”时，我都会收到消息，该网页没有响应，询问是否要停止它。 选择“停止”后，我看到生成了字符。 尽管如此，将字符输入到输入字段并使用“停止”触发器来停止程序是非常困难的，并且通常网页崩溃。

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

如果正在执行DOM操作，则不能在后台运行while循环，因为浏览器JavaScript中只有一个主UI线程。

您可能也不想这样做，因为此代码：

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);
}

持续添加其他计时器以每500毫秒调用一次该代码。 在很短的时间内，您的浏览器将完全无响应。

只需设置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);

您可以选择其中的几种，但是如果您有很多，您可能会考虑减少数量，而让它们每次只做一件事情。

Answer 2

这是一个程序的工作示例，该程序提示用户使用setInterval函数而不是while loop来输入字符。 该应用程序是为了提高打字技能。

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