我自己的提示窗口是否停止了 javascript 执行

Question

我是javascript的新手。我想做一个JavaScript函数来等待用户输入。我知道我可以使用提示，但窗口看起来不好，所以我想制作自己的提示窗口。我搜索并发现我可以使用jquery ui或简单地使用html + css + javascript创建我的窗口来做到这一点，但我的问题是：如果我创建自己的提示窗口，函数会等到给出输入吗？还是在给出输入后简单地调用函数？

这基本上是我想做的：

function () 
{
   var input = MyPrompt(); //Wait here for a user input, like a c scanf
   //Rest of the function who will use the input given
}

我真的需要 javascript 函数停止执行，就像 scanf 或提示符一样。因为我找到的大多数解决方案只是在单击"确认"按钮后调用函数

谢谢

Answer 1

根据JavaScript的本质，没有办法"暂停"javascript应用程序的执行。这就是为什么在 JavaScript 中，大多数外部调用处理程序(如 url 调用或 NodeJS 中的文件系统操作(都是作为回调实现的。

EcmaScript 规范创建者试图提供async/await功能，但实际上这只是承诺的语法糖。

最好的办法是创建自己的"提示"或使用任何已经存在的提示，并将获取用户输入后要执行的操作作为该提示的"回调"：

showMyPrompt({
  success: function(value){ console.log('User said ', value); },
  close: function(){ //handle pressing of a "cancel" button if needed }
})

并在对话功能中：

function showMyPrompt(params){
  // show your prompt here
  $('.dialog-ok-button').click(function(event){
    event.preventDefault();
    var value = $('.my-prompt-input').val();
    params.success && typeof params.success == 'function' && params.success(val);
  });
  // and do similar for "cancel" 
}

Answer 2

一个简单的基于async/await的解决方案可能如下所示。 请注意，您的原始函数的编写方式相同 - 除了添加了 async 和 await 。

function MyPrompt() {
    return new Promise((resolve, reject) => {
        let dialog = document.createElement('dialog');
        dialog.innerHTML = `
            <form>
                <input type="text" required>
                <button type"submit">Ok</button>
            </form>
        `;
        document.body.appendChild(dialog);
        dialog.showModal();
        dialog.querySelector('form').addEventListener('submit', e => {
            e.preventDefault();
            dialog.remove();
            resolve(dialog.querySelector('input').value);
        });
    });
}
(async function ()
{
   var input = await MyPrompt(); //Wait here for a user input, like a c scanf
   console.log(input);
   //Rest of the function who will use the input given
}());