如何在提示时停止执行以下 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:fiddle

这就是我想要的

I Want to Display this before user enter input in Prompt

Now Take Input

I Want to Display this after user enter input in Prompt

I Want to Display this before user enter input in Prompt

Now Take Input

I Want to Display this after user enter input in Prompt

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

Answer 1

请查看更新后的代码。

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

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

Answer 2

您需要将 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 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>

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

How to stop the execution of below javascript code when taking prompt

javascript

jquery

angularjs

prompt