jQuery 等待用户事件

Wait for a user event

提问by Luca

I'm developing a javascript class (with jQuery) to create custom popup, but I can not figure out how to "pause" the script to wait for user response (click on the OK button or cancel)

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

the class is like this:

班级是这样的：

function Popup()
{
}

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

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

    return _response
}

if, for example, use it in an alert, the method always return "undefined", because it does not wait for user click

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

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

I tried to use a while loop like this:

我尝试使用这样的 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
}

but does not work (as I expected)

但不起作用（如我所料）

Then, how do I wait for the user click?

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

Thanks to all

谢谢大家

回答by jHilscher

This is a typical JavaScript issue.

这是一个典型的 JavaScript 问题。

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

return _response

Now let's see what happens here. You're setting an onClick listener to the button, and assign a callback function for that event. Think of that function as of an argument you pass to another function. It is not executed directly.

现在让我们看看这里发生了什么。您正在为按钮设置一个 onClick 侦听器，并为该事件分配一个回调函数。将该函数视为传递给另一个函数的参数。它不是直接执行的。

Now instead of using something like while(_wait){};and force it to execute synchronous, you should work with that callback.

现在while(_wait){};，您应该使用该回调，而不是使用类似的东西 并强制它执行同步。

 Popup.Show = function(text)
 {

    $("#button-ok").on("click",function()
    {
           drawSomething('ok');
    }

 };

var drawSomthing = function(response) {
 // do something
 };

This is a nice start into callbacks: http://javascriptissexy.com/

这是回调的一个很好的开始：http: //javascriptissexy.com/

回答by Fabien Quatravaux

JavaScript is asynchronous, you cannot "pauses" execution. Moreover, while javascript is running the entire user interface freezes, so the user cannot click the button.

JavaScript 是异步的，您不能“暂停”执行。此外，当 javascript 正在运行时，整个用户界面会冻结，因此用户无法单击按钮。

Once you have registered the callback to the click event, the program continues its execution. The following lines in your script

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

    _wait = false;
    _response = "ok!"

will never get executed until the Popup.Showfunction returns. Perhaps this Nettuts article about javascript event programmingwill help you understand the paradigm.

在Popup.Show函数返回之前永远不会被执行。也许这篇 Nettuts 的关于 javascript 事件编程的文章会帮助你理解范式。

Here is a try to fix your code :

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

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();
  }
}

回答by Alan DeLonga

The context of what you are trying to do and why is a little vauge since it seems like you are trying to rebuild the 'alert' function. But 'alert' is a window function that is set up by the browser. This question seems like a duplicate of Stop page execution like the alert() function

您尝试执行的操作的上下文以及原因有点模糊，因为您似乎正在尝试重建“警报”功能。但是'alert'是浏览器设置的窗口函数。这个问题似乎是停止页面执行的副本，如 alert() 函数

Which basically talks about callback chaining, essentially encapsulating functionality so you can enforce the order in which they run. I also think you have a fundamental misunderstanding of how the code is run. As discussed event handlers are asynchronous and while the code is read in order, it is not going to run the function set within the event hanlders callback until that event has been triggered.

这基本上是关于回调链，本质上是封装功能，以便您可以强制执行它们的运行顺序。我还认为您对代码的运行方式有根本的误解。正如所讨论的事件处理程序是异步的，当按顺序读取代码时，它不会运行事件处理程序回调中设置的函数，直到该事件被触发。