Javascript 带线程的对话框 pause/resume

Question

我正在 Javascript 的 HTML 图层中创建一个对话框。当我调用它时，我希望它的行为就像调用内置警报框时一样。它应该在调用时产生 GUI 线程，然后在关闭时在下一个代码行恢复执行。从调用者的角度来看，它就像阻塞了 GUI 线程一样。这在 Javascript 中可行吗？

在下面的主函数中，我希望在调用 showDialog 时保留函数的执行状态。然后显示对话框，并接收点击事件等，当它最终关闭时，我希望将 return 值传递回结果变量并在主函数中恢复执行。这有可能吗？我并没有考虑实际阻塞 GUI 线程，因为那样的话对话框将无法工作。

function main()
{
  // Show the dialog to warn
  let result = showDialog("Warning", "Do you want to continue?", ["OK", "Cancel"]);

  // Do some stuff.
  if (result === "OK") performAction(); 
}

// This function shows a custom modal dialog (HTML layer), and should only return the GUI 
// thread when the user has clicked one of the buttons.
function showDialog(title, text, buttons)
{
  // Code here to draw the dialog and catch button events.
}

Answer 1

由于 Javascript 的性质，您无法阻止代码。唯一的方法是使用计时器检查 return 值，promises 或者，更好的解决方案是回调：

function main()
{
  showDialog({
    title: "Warning", 
    text: "Do you want to continue?", 
    buttons: ["OK", "Cancel"],
    onClose: function(result) {
      if (result == "OK") {
        performAction1();
      } else {
        console.log("Cancelled");
      }
    }
  });
}

function showDialog(options)
{
   $("#dialog .title").innerText = options.title;
   $("#dialog .text").innerText = options.text;
   $(".button").hide();
   for (var i = 0; i < options.buttons.length; i++) {
     $(".button:nth-child(" + i + ")")
       .show()
       .innerText(options.buttons[i])
       .click(() => {
         $("#dialog").hide();
         options.onClose(options.buttons[0]); // Perform the callback
       }
   }
   #("#dialog").show();
}

Answer 2

原来async/await可以满足我的需求。使用 await 关键字调用函数将 "block" 线程在那一点，直到函数的 promise 被解析。为了能够使用 await 关键字，main 函数必须使用 async 关键字。

async function main()
{
  let dialog = new CustomDialog();
  let result = await dialog.show();
  if (result === "OK") performAction();
}

class CustomDialog
{
  constructor()
  {
    this.closeResolve = null;
    this.returnValue = "OK";
  }
  show()
  {
    // Code to show the dialog here

    // At the end return the promise
    return new Promise(function(resolve, reject) 
    { 
      this.closeResolve = resolve; 
    }.bind(this));
  }

  close()
  {
     // Code to close the dialog here

     // Resolve the promise
     this.closeResolve(this.returnValue);
  }
}

Javascript 带线程的对话框 pause/resume

Javascript dialog box with thread pause/resume

javascript

closures

modal-dialog

ui-thread