jQuery 導致的時序性問題

今天下午在開發的時候遇到了一個非常有趣的問題, 請看以下的程式碼：

$(".see_all_source").live('click', function(){
            $(this).parent().html("<img src='xxx' />");   // point 1
            var url = $(this).attr('name');
            var id = $(this).attr('id');
            var html = "";
            $.getJSON(TagtooRequestSite + '/api/GetClickLog/?mode=weburl&to_domain='+encodeURIComponent(url),function(response){
                for(var i=0; i<response.data.length; ++i){
                    if(response.data[i].from_url != "")
                        html += "<div><a href='" + response.data[i].from_url + "'>"+response.data[i].from_url+"</a></div>";
                }
                if(html == ""){
                    html = "查無來源!";
                }
                $("#"+id).parent().html(html);
            });
        });

本來預計的效果是, 當使用者按下去按鈕, 會出現 load 的圖示, 等load 完後這個圖示就會被覆寫, 很典型的ajax 效果, 但是實驗結果卻是那個load 圖示一直存在, 不會消失... 讓我百思不得其解

結果, 問題出在 getJSON 這邊, 你以為會先執行 point1 再執行getJSON 對吧?  畢竟在getJSON 之前並沒有其它branch 出執行緒的點, 然而我試了一個多小時, 終於發現當中的規律, 只要把point1 註解掉就可以了, 要解釋這個現象, 我想到唯一合理的理由是：其實是getJSON 的部分先被執行, 接著才是 point 1 ... 或許是牽涉到parent() 操作的關係, 我把它換成$(this).text("xxx");  就能夠得到預期的效果