JavaScript "while" loop without freezing browser?

I'm trying to delay the default action of clicking on a link, until the user clicks "yes" or "no" to confirm. The problem is that the while loop is freezing the browser (and not even displaying the dialog, even though "open" is called first):

$(".remove").click(function() {
  $("#dialog").dialog("open");

  while (1) {
    // Count sheep
  }
});

Obviously, the "1" is only there for testing purposes. Eventually I want it to check a variable that is set by the dial开发者_StackOverflowog. For now though, I want to know how I can use a loop like this to delay the default click action.

Thanks,

Michael

You can't. You have to exit the function for the dialog to show up. The browser will not do any updates at all as long as the function is running.

You have to use events to handle the user input.

A very simple answer is to use window.setInterval instead of a while loop, but that still isn't a good answer.

The correct answer is for your dialog to have a callback for when the user clicks the button. EDIT: since you're using jQuery, you don't have to write the callback stuff in. The dialog function takes a second callback parameter:

$("#dialog").dialog("open", function() {
    // do your stuff for when they click OK
});

You can use timeout and a callback for this

setTimeout(FunctionHere, 3000);

Edit: I do also think its worth noting there is a jQuery .delay() function in case you every want to chain that into something.

You'll need to add a line to prevent the default action of the click event from happening.

$(".remove").click(function(event) {
  event.preventDefault();
  $("#dialog").dialog("open");

  ....
});

quick points:

1. "while" loop is done by setting timer or interval callbacks
2. better yet, you can instead bind an event to the button or form clicks to test what just happened.

3. best, it looks like you are using jQuery UI, you can set a function to be called when the dialog button is clicked.

   $('form').dialog({
       autoOpen: true,
       buttons: {
           "Yes": onRequestSubmit, // function defined elsewhere
           "No": function () { $(this).dialog("close"); } // function defined here
       },
       modal: true
   });
   

One BIG question persists ... why don't you check the value of the variable whenever it is changed?

I have used setTimeout() to delay a loop to check server to perform pseudo-server-push (which means the browser sends a request to server). Even at 10 sec intervals, it consumed too much cpu resources and slowed the browser response considerably (especially for cheap shop-floor machines).

You have to change your thought paradigm away from desktop .NET event driven programming when dealing with javascript. A persistent loop is no good for performance.

There are two options:

Design your application process flow in such a way that you know where in the code that variable could be changed and check if the variable is changed whenever any of those points in code has executed. I know, this seems incomprehensibly tedious if you came from C#, C or C++.

However, I think the better option is create a hidden text input HTML form item.

<FORM NAME='dingoSam'>
 <INPUT TYPE='hidden' onChange='changed()' NAME='bingoSem'/>
</FORM>

All my code that needed to share a semaphore would reference dingoSam.bingoSem to change its value.

You should exploit the browser's event management system rather than create your own event loop because the javascript runtime exploits its collaboration with OS processes to optimise its event drivers. Whereas, your own event loop written in javascript is far from being in optimal collaboration with OS processes.