javascript - 等待用户事件

Question

我正在开发一个 javascript 类(使用 jQuery)来创建自定义弹出窗口，但我不知道如何“暂停”脚本以等待用户响应(单击“确定”按钮或取消)

类是这样的:

function Popup()
{
}

Popup.Show = function(text)
{
    var _response;
    /* code to draw the popup elements*/

    $("#button-ok").on("click",function()
    {
        _response = "ok!"
    }

    return _response
}

例如，如果在警报中使用它，该方法总是返回“未定义”，因为它不等待用户点击

alert(Popup.Show("hello"))
//return undefined before the popup appears

我尝试使用这样的 while 循环:

Popup.Show = function(text)
{
    var _response;
    var _wait = true;

    /* code to draw the window */

    $("#button-ok").on("click",function()
    {
        _wait = false;
        _response = "ok!"
    }

    while(_wait){};

    return _response
}

但不起作用(如我所料)

那么，如何等待用户点击呢？

感谢大家

Answer 1

JavaScript 是异步的，你不能“暂停”执行。此外，当 JavaScript 运行时，整个用户界面会卡住，因此用户无法单击按钮。

一旦您注册了点击事件的回调，程序就会继续执行。 脚本中的以下几行

    _wait = false;
    _response = "ok!"

在Popup.Show函数返回之前永远不会被执行。 也许this Nettuts article about javascript event programming将帮助您理解范例。

这是修复您的代码的尝试:

Popup.Show = function(text)
{
  /* code to draw the window */

  // bind click event
  var myPopup = this;
  $("#button-ok").on("click",function()
  {
    // this code will be executed after Popup.Show has return
    myPopup.response = "ok!"
    myPopup.Close();
  }
}