Wait for a user event

Question

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)

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:

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

score 1 · Answer 1 · answered Oct 22 '13 at 05:20

1

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

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.Show function returns. Perhaps this Nettuts article about javascript event programming will help you understand the paradigm.

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

answered Oct 22 '13 at 05:20

Fabien Quatravaux

3,737
2
27
33

Yes, I knew that the events are asynchronous, the problem was precisely this. What can be the solution to get around this and make sure that the function returns an user response? – Luca Oct 22 '13 at 07:52
This in not possible. The function will **always** return before the user can click the button. You have to change your code to take that into account. – Fabien Quatravaux Oct 22 '13 at 07:58
2

So I can't replicate this: `alert(prompt())`? In this case prompt() waits for user confirmation, or not? – Luca Oct 22 '13 at 08:18
JavaScript is not asynchronous; there are functions within JavaScript such as making AJAX calls that create asynchronous behavior, but the base language itself is synchronous. – artomason Mar 26 '19 at 01:10

score 0 · Answer 2 · answered Oct 22 '13 at 05:13

This is a typical JavaScript issue.

$("#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.

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

 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/

thank you, but the real problem is waiting for the user event before returning value. How can I do? — Luca, Oct 22 '13 at 07:58
That is not possible, you have to restructure your code, to make use of the callback. Like this: [link](http://jsfiddle.net/Vyra9/) — jHilscher, Oct 22 '13 at 08:48

score 0 · Answer 3 · edited May 23 '17 at 11:54

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

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.

Wait for a user event

3 Answers3

Linked