提示时如何停止执行以下javascript代码

Question

这是我的代码：

for (i = 0; i < 2; i++) {

    $("div").append("I Want to Display this before user enter input in Prompt <br>")
    setTimeout(function() {
        input = prompt("test");
        //PUT more code here
    });
    $("div").append("I Want to Display this after user enter input in Prompt")

}

这里是小提琴：fiddle

这就是我想要的

我想在用户输入提示之前显示这个

现在输入

我想在用户在 Prompt 中输入输入后显示此内容

我想在用户输入提示之前显示这个

现在输入

我想在用户在 Prompt 中输入输入后显示此内容

我想以这种方式接受用户的输入。如果不是通过提示，那么还有其他方式吗？

Answer 1

您需要将append 保留在setTimeout() 函数内的div 中，您还可以检查input 的值是否为null 以供用户输入。除此之外，使用setInterval() 继续显示更新问题中的提示，这样当用户按下cancel 时，提示将永远关闭。

$("div").append("I Want to Display this before user enter input in Prompt <br>")
var promptLoop = setInterval(function(){
  var input = prompt("test");
  if(input !== null && input.trim() !== ''){
    $("div").append("<br/>I Want to Display this after user enter input in Prompt. User input is " + input)
  } else {
    clearInterval(promptLoop);
  }
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

Answer 2

请查看更新后的代码。

https://jsfiddle.net/sa5ownd8/7/

在prompt 函数之后添加了append 代码。

Answer 3

您的代码的问题是 setTimout 函数是异步的，这意味着它内部的代码块不会立即执行，而是放入一个 event queue 中，它会等到所有其余部分同一范围内的代码被执行，然后才被执行。

如果您只想在setTimeout 的延迟过去后执行某些代码，那么您需要将所有这些代码放在setTimeout 中。

$("div").append("I Want to Display this before user enter input in Prompt <br>")
setTimeout(function() {
    const input = prompt("test");
    //PUT more code here

    $("div").append("I Want to Display this after user enter input in Prompt")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>