尝试在指定的时间内运行 while 循环...不退出答案

【问题标题】：Trying to run a while loop for a specified amount of time...Not exiting尝试在指定的时间内运行 while 循环...不退出
【发布时间】：2018-08-19 02:45:50
【问题描述】：

所以，我有一个本地主机网站，您可以在其中按一个按钮来启动一个 while 循环。我的意图是遍历这个while循环并“等待”来自其他按钮的按钮点击，直到135秒过去。然后，它应该退出循环。当代码（嵌入在 html 中）执行时，它只会打印“test1”，而无法离开循环并打印 test2。

        allyTrack = 0;
        scaleTrack = 0;
        enemyTrack = 0;

        allyString = ""
        scaleString = ""
        enemyString = ""

        allyClicked = false;
        scaleClicked = false;
        enemyClicked = false;

        function allyAdd(){
            allyClicked = true;
        }

        function scaleAdd(){
            scaleClicked = true;
        }

        function enemyAdd(){
            enemyClicked = true;
        }

        //Making the long vectors
        function startGame(){
            var startTime = new Date().getTime();
            //var currentTime = new Date().getTime();
            while(true){
                document.getElementById('test').innerHTML = 'test1';
                if(allyClicked){
                    allyTrack += 1;
                    allyString.append(allyTrack.toString())
                    allyClicked = false;
                }
                else if(scaleClicked){
                    scaleTrack += 1;
                    scaleString.append(scaleTrack.toString())
                    scaleClicked = false;
                }
                else if(enemyClicked){
                    enemyTrack += 1;
                    enemyString.append(enemyTrack.toString())
                    enemyClicked = false;
                }
                else{
                    allyString.append(allyTrack.toString())
                    scaleString.append(scaleTrack.toString())
                    enemyString.append(enemyTrack.toString())               
                }
                currentTime = new Date().getTime();

                if(currentTime-startTime > 2000){
                    break;
                }
            }
            document.getElementById('test').innerHTML = 'test2';
            document.getElementById('list').innerHTML = allyString + '\n' + scaleString + '\n' + enemyString;
        }

【问题讨论】：

JavaScript 引擎一次只会评估一段代码（单线程）。在startGame() 及其while 循环完成之前，无法调用像allyAdd() 这样的函数。在迭代之间添加延迟可以让引擎时刻评估其他代码。 – Create a pause inside a while loop in javascript
只要循环在运行，就没有点击事件。它们会延迟到循环完成后。你只是在冻结你的页面。
@JonathanLonowski 因此，如果我在内部创建暂停，它会自动允许时间响应按钮点击。还是按钮点击必须与暂停一致？
@RileyFitzpatrick 点击事件将在接下来的两次超时迭代之间运行，因此用户不必在暂停期间点击。每个点击事件和超时都将被添加到一个队列中，引擎一次只处理一个（事件循环）。

标签： javascript while-loop timer infinite-loop

【解决方案1】：

String.append() 不属于 JavaScript。我将其替换为concat()，现在可以使用了。

【讨论】：

我还建议使用@bukharim96 提示，因为当循环工作时，界面仍然没有响应。
完美！循环现在可以工作了。唯一的问题是网站基本上冻结了，在循环运行期间我无法按下按钮。有什么提示可以在循环/直到时间结束时“监听”按钮点击？
哎呀没有看到你上面的评论^^
请注意，.concat() 不会更改调用它的字符串。它返回一个修改后的字符串，应该分配给一个变量。
@RileyFitzpatrick 没关系。字符串值在 JavaScript 中是不可变的，因此它们实际上不能就地更改。当您尝试修改它们时，您总是会得到一个新的字符串值。

【解决方案2】：

您可以使用全局setTimeout 方法：

function loop(callback, interval) {
  return setTimeout(function() {
    callback();
  }, +interval);
}

loop(function() {
  console.log("Looping...");
}, 1000);

【讨论】：

谢谢！我正在尝试使用 Juan 的提示。
我的荣幸！ ;D
我想在问你之前我会做自己的研究，但我仍然无法理解“回调”功能。我是一名新程序员，所以我还没有学习函数式编程。有没有什么超级快捷的方式来解释callback();谢谢
在 JavaScript 中你可以引用一个函数：写它的名字不带括号。如您所见，它是一种与函数交互的方式，与对象的交互方式相同。