登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

pcwanli的博客

nx

 
 
 

日志

 
 

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

2011-01-24 21:08:45|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

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 即可获得更好的兼容.

 

 

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

假设 一个页面结构如下 :

 

01<html>
02<head>
03<script>
04window.setTimeout(function(){alert(1);},0);
05</script>
06</head>
07<body>
08很多很多 其他元素 和文字 图片内容等等等等.....
09</body>
10<script src="abc.js">
11<script>
12alert(2);
13</script>
14</html>
1ie6  和firefox3.6 会 先 打印 2 后打印 1       chrome5  safari4 opera10 则相反 先1后2 由于 这个实际意义不大 所以 就没有必要 对各个浏览器版本都做测试了.
1说说体会  如果 head 中的脚本块要执行很长时间 假如 3秒 那么这3秒内 后面的 资源加载和渲染都被阻塞了... (这时候最好的做法还是将起放到文档的尾部)  使用setTimeout
1后.及时 是0ms 在ie浏览器中  导致的结果则将是 后续的 文字内容 文档结构 被完全构建完毕  也就是说其效果 类似于把该脚本块放到了 文档尾部.  但是 当内容十分多的时候 非ie浏览器 
1则是未必了 steve sounders 提出了个250ms 延迟  经过我的测试 (本地iis) 这个值 完全是看 中间内容的  因为我设置了 70 ms延迟 对于1000字 左右 也仍然可以保证 文字内容 
1被显现出来. 那么这个 250ms 号称 神奇的250 我觉得 就是不可信任的值  感觉和 文档内容 的大小有很直接的关系....   
1最后 一旦 有很多资源在一个脚本块的后面 而这个脚本块内的脚本又要执行相当长的时间  还是建议想办法把他方到 文档底部的好... 如果实在不行  那么 使用setTimeout也不是一个好
1主意 原因是 脚本依赖性 问题难以得到跨浏览器的支持..(比如上面html片段中 引用了abc.js 在 head脚本块中 貌似只有 firefox 和opera 可以保证 在0ms延迟的情况下 依然是现加载到abc.js)
1其次 setTimeout的 延迟时间 的不确定性   等等问题.
  评论这张
 
阅读(910)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018