alert(1);
$(id).click(function(){
alert(3);//выполняется, когда пользователь кликнет, а не сразу.
$.getJSON(1,function(json){
alert(5);//вызвалася, когда пришли результаты для обработки
$(вставляю в начало элемента).prepend(<div id="a1">этот текст</div>);
//Так как "4" уже выполнился, то пришедшую информацию надо обрабатывать тут, а не там
});
alert(4);//getJSON просто послал запрос, и повесил обработчик события, и код пошел дальше. обработчик события вызовется тогда, когда придут результаты с сервера
$("#a1").animate({left: "+=377"}, 1000);
});
alert(2);//метод click просто повесил обработчик события, и код пошел дальше
методы click и getJSON Оба асинхронные.
Вам очевидно, почему сперва сразу выполняются 1 и 2, а вот 3 выполняется позже(когда был совершен клик)
Если бы после вызова click(), JS ждал бы этого клика, то никакой другой код не смогу бы выполнятся, и все зависло бы, пока пользователь не кликнет.
Аналогично, и getJSON
Он отправил запрос, и вызовет обработчик когда придется результат.
Если сервер медленный, то это может произойти через несколько секунд, или даже минут.
Если бы после отправления запроса JS ждал бы результата для того чтобы вызвать обработчик события ДО вашего кода анимации, то опять -таки все зависло бы на эти секунды или даже минуты, что не очень красиво
Хотя у getJSON в отличии от click есть такой режим работы(параметр async:true), но как я описал это очень плохая идея.
Привыкайте к событийно-ориентированной асинхронной модели