Event Listener and AJAX asynchronous variable

Question

I have a question, perhaps a very simple one, but whatever. When you register an event listener inside an asynchronous function, I believe that all values ​​inside this function will be non-existent when the function runs it.

However, the event listener, as shown in the code below, can still access the values variable, how can I do this? Is the variable stored inside the event listener somehow?

 $.ajax({ type: "GET", cache: false, url: "/whatever", success: function(data) { var values = ["Some Values", "Inside this Object"]; $("#id :checkbox").click(function() { var allValues = []; $('#id3 :checked').each(function() { allValues.push($(this).val()); }); $("#id2").val(allValues); callMe.init(values,allValues); }); } }); 

Answer 1

This is due to closure. The function “closes” all variables in its lexical domain, which means that it retains access to them as soon as the function in which it was defined returns.

In your specific example, values are in scope when the function specified in click defined, so it will remain available even after success completed.

Here you will find much more information:

• How do JavaScript locks work?

Answer 2

The jQuery $ sign is in the global area. Everything can refer to it. You reach the value of the form flag in $.