设置innerHTML后翻滚的奇怪现象

最近碰到一个奇怪的问题，记录一下。

处理过程是这样的，画面的onload事件中，通过ajax去后台读取数据，在ajax的响应函数中将数据写入一个div的innerHTML，然后卷动这个div一定的距离。

示意代码如下（body中onload="init()"）：

function init() {
  ...

  //request是XMLHttpRequest
  request.onreadystatechange=function() {
    if(request.readyState==4) {
      if(request.status==200) {
        responseHandler(request);
      }
    }
  }
	
  request.open('GET', url, true);
  request.send(null);

  ...
}

function responseHandler(request) {
  document.getElementById("scrollDiv").innerHTML=request.responseText;
  scroll();
}

function scroll() {
  document.getElementById("scrollDiv").scrollTop = {一个数};
}

运行时发现，有时能滚到位，有时不能滚到位，ie8和ff3.5上都试过，现象一样。我估计是有时innerHTML虽然赋值完毕，但浏览器还没有处理完，所以指定的滚动位置越界，造成没滚到位。之后我苦苦找寻设置innerHTML后处理完成的事件也没找到，最后找到一个奇怪的办法可以解决这个问题，就是调用翻滚时不是直接调用scroll(), 而是这样：

setTimeout("scroll()", 0);

说它奇怪是因为延时虽然设为0，但每次都能正常翻滚到指定位置，屡试不爽。奇怪。

评论

4 楼 yiyu 2010-01-28  

原来是因为这个呀，多谢znjq

3 楼 znjq 2010-01-28  

dom渲染和js不同步造成的,很多时候都是用settimeout来defer处理的,ext用到很多

2 楼 yiyu 2010-01-28  

但是为什么放到下一帧就可以正常翻滚了捏？

1 楼 02221021 2010-01-28  

不奇怪, 虽然是0. cpu也把它放到下一帧处理了