如何使用jquery等到innerHTML完成加載之前執行其他函數？

Question

我嘗試從數據庫中獲取數據並將它們顯示到div上，所有消息顯示在div上後，只有它會知道div的scrollheight，它會自動滾動到div的底部作爲默認功能asd （）。我的問題是當數據庫中的消息太多時，需要很長時間纔將它們顯示在div上，因此在顯示所有消息之前執行asd（）。這意味着div的scrollheight不正確，因此自動滾動到底部是失敗的。

$(function() { showMsg(); asd(); }); 

如何要等到showMsg()完成渲染的內容執行asd()過嗎？ showMsg（）裏面有jQuery.get(); .append(); .replace(); .innerHTML。

當我使用超時後3秒執行ASD（）問題是固定的：

$(function() { showMsg(); setTimeout(asd();, 3000); }); 

這就是爲什麼當showMsg（）尚未完成加載的內容是執行我肯定ASD（）的。

我想我知道問題在哪裏。如果showMsg（）在DOM準備好之前執行，並且如果在DOM準備好之後執行asd（）（此時所有消息已經渲染），所以問題得到解決。但是現在我的情況是在DOM準備好之後，所有消息還沒有完成呈現，因爲showMsg（）和asd（）只在DOM準備好後執行，「執行」並不意味着「完成呈現」。如何確保showMsg（）在執行asd（）之前將內容呈現爲div？

對於那些想知道誰裏面showMsg代碼（），在這裏：

function showMsg(){ 
    jQuery.get("showRspContentLive.php", function(data) { 
     $('#rsp .rspcontent').append(data); 
     var container = document.getElementById("rsp2"); 
     var text = container.innerHTML;   
     text = text.replace(/\(smile1\)/g, '<img src="images/emoticons/emobasic/smile1.gif" border="0" />') 
     .replace(/\(smile2\)/g, '<img src="images/emoticons/emobasic/smile2.gif" border="0" />') 
     .replace(/\(smile3\)/g, '<img src="images/emoticons/emobasic/smile3.gif" border="0" />') 
     .replace(/\(haha2\)/g, '<img src="images/emoticons/emobasic/haha2.gif" border="0" />') 
     .replace(/\(haha3\)/g, '<img src="images/emoticons/emobasic/haha3.gif" border="0" />') 
     .replace(/\(haha5\)/g, '<img src="images/emoticons/emobasic/haha5.gif" border="0" />') 
     .replace(/\(sad1\)/g, '<img src="images/emoticons/emobasic/sad1.gif" border="0" />'); 
     container.innerHTML = text; 

     $('#rsp').scrollTop($('#rsp')[0].scrollHeight); // this is my asd() function, how to execute it only if after container.innerHTML=text; is finish loaded? 
    }); 
}; 

Answer 1

你的意思是像

$.get("http://someurl.com", 
    function(html){ 
     //format the data any way you would like... 
     //... 

     //setm the html 
     $('#myCt').html(html); 

     //call your function after 
     asd(); 
}); 

var asd = function(){ 
    //some cool stuff 
} 

更新 如果你沒有做任何的AJAX請求在你的asd()功能，那麼你的showMsg()功能應該更新就好了，否則就連鎖你的callbacks ...
例如$.get('moredata.aspx', asd);

Answer 2

使用asd在回調到jQuery.get：

function showMsg() { 
    jQuery.get("http://example.com", function(data) { 
     // Your code that uses .append(), .replace(), and .innerHTML 
     asd(); 
    }); 
} 

這會自動調用asd一旦你get完成執行。所以你並不需要顯式調用asd在load處理：

$(function() { 
    showMsg(); 
});