jquery - 如何使用jquery等到innerHTML完成加载后再执行其他功能？

Question

我尝试从数据库获取数据并将它们显示到div上，当所有消息都显示在div上后，只有它会知道div的滚动高度，它会默认通过函数自动滚动到div的底部asd()。我的问题是，当数据库上有太多消息时，需要很长时间才能将它们全部显示到 div 上，因此在显示所有消息之前执行 asd() 。意味着此时 div 的滚动高度不正确，因此自动滚动到底部失败。

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

如何等到showMsg()在执行之前完成渲染内容asd() ？我有jQuery.get(); .append(); .replace(); .innerHTML在 showMsg() 内。

当我使用超时在 3 秒后执行 asd() 时，问题得到解决:

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

这就是为什么我确信当 showMsg() 尚未完成加载内容时会执行 asd()。

我想我知道问题出在哪里了。如果 showMsg() 在 DOM 准备好之前执行，并且如果 asd() 在 DOM 准备好之后执行(此时所有消息都已渲染)，那么问题就解决了。但现在我的情况是在 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
}

更新如果您没有在 asd() 函数中发出任何 AJAX 请求，那么您的 showMsg() 函数应该可以正常更新，否则只需链接您的 回调...
例如$.get('moredata.aspx', asd);