Question

Here is the code :-

var quiz;
function startQuiz() {

     $.ajax({
        url: 'get_quiz/',
        cache: 'false',
        dataType: 'json',
        async: 'false',
        success: function(data) {
            quiz = data;
            alert(quiz[0].q);   // I'm able to access quiz here     

},   
    }    
);  
    }

startQuiz();

alert(quiz[0].q);   // Not able to access it here.

I’m not able to access quiz here, am I mission something?, Whats wrong with this?

Answer 1

Ajax is assynchronous which can be an unfamiliar concept. Your code will run like this:

1. var quiz;
2. define function startQuiz;
3. call startQuiz;
4. do ajax call (and continue! don't block)
5. alert(quiz[0].q);    // Not able to access it here.
-- ajax call comes back
6. quiz = data;
7. alert(quiz[0].q);       // I'm able to access quiz here

Ajax is asynchronous, it doesn’t block. This means that when you make the ajax call the callback doesn’t actually get called until the ajax call returns, it doesn’t block and wait. Instead the code will continue on.

Then later when the ajax call returns the data, your callback function will be executed.

Javascript does this by means of an event loop.

See it like this: steps 1-5 are part of the first event. 6-7 are part of the second event.

A cool thing about JavaScript is that in your callback you still have access to anything above it (like the variable quiz) because of scoping. This is called a closure. Your callback function closes around the scope and brings it with him to the next event.