jquery，while循环在后台运行，同时while循环答案

【问题标题】：jquery, while loop running in the background, simultaneous while loopsjquery，while循环在后台运行，同时while循环
【发布时间】：2016-05-15 16:20:43
【问题描述】：

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>

【问题讨论】：

Javascript 是单线程的。
@DrewKennedy：不，JavaScript 不是单线程的。甚至在浏览器上也没有。 JavaScript，语言，对线程的话题保持沉默。这是一个环境问题。在浏览器中，有一个主 UI 线程和任意数量的 Web 工作线程。
@T.J.Crowder How to do Threading in Javascript 当然这是从 2011 年开始的，所以如果有什么变化，我很乐意纠正
谁说你不行，你可以用web workers最新的浏览器htmlgoodies.com/html5/tutorials/…
@DrewKennedy：这个答案不正确。 2011年也是不正确的，而且上面已经有cmet指出不正确了。

标签： javascript jquery

【解决方案1】：

如果 while 循环在进行 DOM 操作，则不能在后台运行它，因为浏览器 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);

您可以拥有其中的几个，但如果您有很多，您可能会考虑减少他们的数量，并且每次只让他们做不止一件事。

【讨论】：

如何用while循环实现。我需要在每 500 毫秒后不断生成
有没有办法用 JSON 实现这一点？
德拉克劳德，我终于明白你写了什么。在您的示例中不需要 while 。非常感谢。
找到了 [promises] (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…), [p2] (html5rocks.com/en/tutorials/es6/promises) ，好像他们在js中启用了多线程，了解后会写更多。
@olga：不，promise 不会在 JavaScript 中启用多线程，它们只是为异步操作带来不同（更好）的语义。多线程是一个环境的东西，而不是语言的东西（关于 JavaScript）。例如：如果您使用 web workers，则 Web 浏览器上的 JavaScript 是多线程的（如果您不使用，则为单线程），在 JVM 上是多线程的（例如，如果您使用的是 Rhino 或 Nashorn），以及单线程在 NodeJS 上线程化；因为这就是每个环境的设置方式。

【解决方案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>

【讨论】：