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