How does jquery handle nested functions and event time?

Question

There are a few things that really bother me about how jquery handles nested functions (not to the extent that I can't sleep, but it gets there), and I want the jquery expert to explain how everything works me piece of the mind.

Let's say you have the code below:

<button id="first">click me first</button> <button id="second">click me next</button> 

And the following jquery code:

 $(document).ready(function() { $('#first').click(function() { $('#second').click(function() { alert('test'); }); }); }); 

A dialog box will appear if you click the first button and then the second button.

I understand that jquery creates the $('#first').click() function when the DOM is ready and calls it when someone clicks the first button.

However, I am puzzled that: [Q1] is the function $('#second').click() , also created when the DOM is ready or only when $('#one').click() ?

Now, when you look at jQuery code, there is nothing that “stores us” in the function $('#first').click() , that is, when the user presses the first button, the function $('#second').click() must be created and we must immediately exit the function $('#one').click() . However, after pressing the first button, the jquery must somehow hold $('#second').click() indefinitely in memory if the user presses the second button.

[Q2] how does jquery know to save the $('#second').click() function in memory until the user presses the second button after pressing the first button?

Finally, let's say you wanted to change your code so that the user presses the second button within 10 seconds after pressing the first button to display a dialog box:

[Q3], how would you implement this so that jQuery knows to stop listening for click events on the second button after 10 seconds?

Answer 1

Q1 - JS will simply load function definitions. It will not start it unless they are explicitly called / called. In this case, it simply binds the event handler to #first and wait for someone to click the button to fire the event. This forces the second function to join the second button.

Q2 Again, this is not jQuery, it is JavaScript that does all the work. The method is simply bound to the DOM element and runs in the case to which it is attached. JS is like any programming language and will store all methods and variables in memory.

The second click function is not actually tied to the second button until someone clicks on the first button. This is because when you press the first button, JS knows how to start the first method, which does all the work of attaching the second method to the second button.

Q3 You can use setTimeout to cancel this method from the DOM element.

 $(document).ready(function() { $('#first').click(function() { $('#second').click(function() { alert('test'); setTimeout(function(){$('#second').unbind('click');}, 10000); }); }); }); 

Note Disables all click event handlers from this DOM element. You can also cancel this particular method by passing it as a parameter. Check out the API docs for use.

setTimeout: https://developer.mozilla.org/en/DOM/window.setTimeout

unbind: http://api.jquery.com/unbind/

Answer 2

[A1] The second function is only created when #first pressed, since it is part of the execution of the first method. It also means that if you press #first n times, you should get n warnings for every click on #second .

[A2] The function is rooted in the #second element. While this element is alive, javascript knows how to save the function.

[A3] You will need to save the function pointer and setTimeout to clear it.

 $(document).ready(function() { $('#first').click(function() { var secondFunction = function() { alert('test'); }; $('#second').click(secondFunction); setTimeout(function(){ $('#second').unbind('click', secondFunction); }, 10000); }); }); 

The best implementation is probably something like this:

 $(document).ready(function() { var enabled = false; $('#first').click(function() { enabled = true; setTimeout(function(){ enabled = false; }, 10000); }); $('#second').click(function() { if(enabled) { alert('test'); }; }); }); 

Answer 3

The answer to your first question: yes, the second button will contact the click event only when the user clicks on the first button.

Second question: I'm not sure what you are asking.

Third: Assuming that the button has nothing to do except bind the event to the second button after a click, you can set a timeout on the finished document within 10 seconds. Now, when the timer expires, it should unlock the button with one click, so it blocks the event of the second button. You probably understand now. eg.

 $(document).ready(function(){ setTimeout(removeEvent, 10000); $('#first').click(function() { $('#second').click(function() { alert('test'); }); }); }); function removeEvent(){ $('#first').unbind('click'); }