等待jquery .html方法完成渲染

Question

我有div与垂直滚动条.Div正在通过ajax动态更新,并使用jQuery的.html方法插入html.div更新后滚动条返回顶部,我试图将它保持在上一个位置.

这是我正在尝试的方式:

var scrollPos = $('div#some_id').scrollTop(); //remember scroll pos
$.ajax({...
    success: function(data) {
        $('div#some_id').html(data.html_content); //insert html content
        $('div#some_id').scrollTop(scrollPos); //restore scroll pos
    }
});

这失败了.我最好的猜测是,由于插入的html没有呈现(即没有滚动),它失败了.

例如,这是有效的.

setTimeout(function(){
    $('div#some_id').scrollTop(scrollPos);
}, 200);

但在我看来,这是肮脏的黑客.我无法知道某些浏览器不会花费超过200毫秒来渲染插入的内容.

有没有办法等待浏览器在继续之前完成渲染插入的html？

Answer 1

它仍然是一个黑客,实际上没有回调可用于HTML实际插入和准备好,但你可以检查是否html_content每隔200毫秒插入元素,以确保它们真的准备就绪等.

从ajax调用中检查HTML中的最后一个元素:

var timer = setInterval(function(){
   if ($("#lastElementFromAjaxID").length) {
       $('div#some_id').scrollTop(scrollPos);
       clearInterval(timer);
   }
}, 200);

对于更高级的选项,您可以在没有间隔的情况下执行此类操作,并将其绑定到DOMnodeInserted,并检查是否插入了最后一个元素.