浏览器中的 window.setInterval 和window.setTimeout

 

2个计时器方法的异同...

如果期望多次回调 某方法 出于性能考虑 应使用 setInterval

出于 稳定 回调间隔考虑 应使用setTimeout方法

 

var timer;

 function f(){

 if(条件) clearInterval(timer)

// clearTimeout clearInterval 都可以清除 setTimeoutsetInterval 产生的时间戳对象

 setTimeout(f,间隔时间)

}

使用setTimeout 应吧该语句放到 当前上下文环境 的最后一行 调用 以便获取可靠的 时间间隔..

原因是

setTimeout(function(){dosomethions…},间隔时间);

dosomethins…….

………………………….

……………………………

计时器 会在setTimeout语句执行时产生 并开始计时. 但如果当前上下文中语句没有执行完毕 计时到达时间 计时器 也不会回调方法. 而是要等待 当前js 执行完毕后 才执行所以 即使间隔时间是0 也没有用.

 

setInterval 应避免 间隔时间为0 原因是 0对于计时器 timeoutinterval来说都是非法值只是浏览器比较宽容而已. 但是在ie浏览器 中使用 interval 如果间隔为0 则只会回调一次方法所以 如果期望多次的 立即的 重复回调 间隔时间 应该至少为1 ms

 

但是setInterval 因为和setTimeout有同样的问题 即需要等待当前js执行进程结束.后才可能去执行回调方法 好在 这种问题并不是积累性的.. 也就是说 下次回调会重新计算计时器时间setInterval的主要问题在于 我们并不能像setTimeout那样把 计时器放在 反复回调的函数体末尾一旦 该函数执行时间 可能超过 setInterval的间隔 那么 函数执行间隔 就是不稳定的.

 

以下资料 我没有自己测试 而是参考了 hax blog一篇关于 系统时钟精度的文章.

 

接下来应该了解 对于不同浏览器 不同操作系统 系统时钟 精度的差异.

对于ie浏览器 win98系统上 这个精度可能在 55ms左右 及时 我们设置间隔为 01 那么实际下次回调的时间 可能在55ms 以后 xp系统 这个精度大概在16-18ms

Visata 可能最小值大概能达到7ms 但是对于 firefox浏览器 其时钟可能是 java的系统时钟和windows 不同 其最小精度大概可以看为 16ms左右. 而苹果操作系统 系统时间精度 可能在10 ms左右 如果我们使用计时器 回调 需要稳定 连续的间隔 那么 这个值应该不小于 16ms 即可获得更好的兼容.

 

 

最后 照例 还是说以说 各个浏览器中的一些差异

假设 一个页面结构如下 :

 

<html>
<head>
<script>
window.setTimeout(function(){alert(1);},0);
</script>
</head>
<body>
很多很多 其他元素 和文字 图片内容等等等等.....
</body>
<script src="abc.js">
<script>
alert(2);
</script>
</html>

ie6  和firefox3.6 会 先 打印 2 后打印 1       chrome5  safari4 opera10 则相反 先1后2 由于 这个实际意义不大 所以 就没有必要 对各个浏览器版本都做测试了.
说说体会  如果 head 中的脚本块要执行很长时间 假如 3秒 那么这3秒内 后面的 资源加载和渲染都被阻塞了... (这时候最好的做法还是将起放到文档的尾部)  使用setTimeout
后.及时 是0ms 在ie浏览器中  导致的结果则将是 后续的 文字内容 文档结构 被完全构建完毕  也就是说其效果 类似于把该脚本块放到了 文档尾部.  但是 当内容十分多的时候 非ie浏览器 
则是未必了 steve sounders 提出了个250ms 延迟  经过我的测试 (本地iis) 这个值 完全是看 中间内容的  因为我设置了 70 ms延迟 对于1000字 左右 也仍然可以保证 文字内容 
被显现出来. 那么这个 250ms 号称 神奇的250 我觉得 就是不可信任的值  感觉和 文档内容 的大小有很直接的关系....   

最后 一旦 有很多资源在一个脚本块的后面 而这个脚本块内的脚本又要执行相当长的时间  还是建议想办法把他方到 文档底部的好... 如果实在不行  那么 使用setTimeout也不是一个好
主意 原因是 脚本依赖性 问题难以得到跨浏览器的支持..(比如上面html片段中 引用了abc.js 在 head脚本块中 貌似只有 firefox 和opera 可以保证 在0ms延迟的情况下 依然是现加载到abc.js)
其次 setTimeout的 延迟时间 的不确定性   等等问题.

 

 

posted @ 2010-04-30 22:55  Franky  阅读(3761)  评论(0编辑  收藏  举报