javascript - How does jQuery handle nested functions and timing of events? - Stack Overflow

admin管理员组

文章数量:1387293

There are a couple of things that really trouble me with regards to how jQuery handles nested functions (not to the point that I can't sleep but it's getting there) and I wish a jQuery expert could explain how things work to bring me piece of mind.

Let's say you have the below HTML code:

<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 popup if you click the first button and then the second button.

I understand jQuery instantiates the $('#first').click() function when the DOM is ready and calls it when someone clicks on the first button.

However what I am puzzled with is the following:
[Q1] is the $('#second').click() function also instantiated on DOM ready or only when $('#one').click() is called?

Now, when you look at the jQuery code, there is nothing that "keeps us" in the $('#first').click() function, that is once the user clicks on the first button, the $('#second').click() function should be instantiated and we should exit the $('#one').click() function straight away. However after clicking the first button, jquery must somehow keep $('#second').click() indefinitely in memory in case the user clicks on the second button.

[Q2] how does jquery know to keep the $('#second').click() function in memory until the user clicks on the second button after clicking the first button?

Finally let's say you wanted to modify your code so that the user had to click the second button within 10 seconds of clicking the first button for the dialog box to appear:

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

There are a couple of things that really trouble me with regards to how jQuery handles nested functions (not to the point that I can't sleep but it's getting there) and I wish a jQuery expert could explain how things work to bring me piece of mind.

Let's say you have the below HTML code:

<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 popup if you click the first button and then the second button.

I understand jQuery instantiates the $('#first').click() function when the DOM is ready and calls it when someone clicks on the first button.

However what I am puzzled with is the following:
[Q1] is the $('#second').click() function also instantiated on DOM ready or only when $('#one').click() is called?

Now, when you look at the jQuery code, there is nothing that "keeps us" in the $('#first').click() function, that is once the user clicks on the first button, the $('#second').click() function should be instantiated and we should exit the $('#one').click() function straight away. However after clicking the first button, jquery must somehow keep $('#second').click() indefinitely in memory in case the user clicks on the second button.

[Q2] how does jquery know to keep the $('#second').click() function in memory until the user clicks on the second button after clicking the first button?

Finally let's say you wanted to modify your code so that the user had to click the second button within 10 seconds of clicking the first button for the dialog box to appear:

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

• javascript
• jquery
• dom
• events
• jquery-events

Share Improve this question Follow edited Jun 18, 2022 at 16:18 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Apr 17, 2011 at 10:43 MaxMax 13.3k3232 gold badges9393 silver badges146146 bronze badges 1

• I'd like to point out that your questions are entirely unrelated to jQuery save of the fact that you used jQuery as an example. This is how javascript works, not jquery. Interestingly, javascript is the most important tag you should have added... – Christian Commented Apr 17, 2011 at 10:58

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Q1 - JS will simply load function definitions. It won't run it unless they are explicitly triggered/called. In this case, it will simply attach the event handler to #first and wait until someone clicks the button to fire the event. This will make the second function attach itself to the second button.

Q2 Again, it's not jQuery, it's JavaScript doing all the work. The method is simply attached to the DOM element and is triggered on the event it is attached to. JS is like any programming language and will keep all methods and variables in its memory.

The second click function isn't actually attached to the second button until after someone clicks on the first button. This is because, when the first button is clicked, JS knows to trigger the first method which does all the work of attaching the second method to the second button.

Q3 You could use setTimeout to unbind that method from the DOM element.

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

Note This unbinds all click event handlers from this DOM element. You can also unbind that particular method by passing it as a parameter. Check out the API docs for usage.

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

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

[A1] The second function is only instantiated when #first is clicked as it is part of the execution of the first method. This also means that if you click #first n times you should get n alerts for every click on #second.

[A2] The function is rooted by the #second element. So long as that element is alive javascript knows to keep the function around.

[A3] You would need to save off the function pointer and do a 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);
    });
});

A better implementation is probably something like:

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

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

The second question: I'm not sure what you're asking.

The third one: Assuming the button one has nothing to do except bind the event to second button once clicked, you can set a timeout on document ready for 10 seconds. Now when the timer expires it must unbind the button one's click event hence blocking second button's event. I guess you understand now. e.g.

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

本文标签： javascriptHow does jQuery handle nested functions and timing of eventsStack Overflow