javascript中setTimeout 和setInterval的区别 - purpen - ITeye博客
博客分类：
window对象有两个主要的定时方法，分别是setTimeout 和 setInteval 他们的语法基本上相同，但是完成的功能取有区别。
　 setTimeout方法是定时程序，也就是在什么时间以后干什么。干完了就拉倒。
　 setInterval方法则是表示间隔一定时间反复执行某操作。
　 如果用setTimeout实现setInerval的功能，就需要在执行的程序中再定时调用自己才行(setTimeout( ) 預設只是執行一次, 但我們可以使用一個循環方式, 使到一個setTimeout( ) 再啟動自己一次, 就會使到第二個 setTimeout( ) 執行, 第二個又啟動第三個, 這樣循環下去, 這 setTimeout( ) 就會不斷執行)。如果要清除计数器需要根据使用的方法不同，调用不同的清除方法：
var timeID = null;
timeID=setTimeout('northsnow()',1000);
clearTimeout(timeID);
timeID=setInterval('northsnow()',1000);
clearInteval(timeID);
&script type="text/javascript"&
var count = 0;
var timeID = null;
function counter() {
$("#count").html(count + '%');
timeID = setTimeout("counter()", 1000);//注意:执行的函数需要加引号,否则会报错的
if (count & 10) {
clearTimeout(timeID);
$(function() {
counter();
&script type="text/javascript"&
var count = 0;
var timeID = null;
function counter() {
$("#count").html(count + '%');
if (count & 10) {
clearInterval(timeID);
$(function() {
timeID = setInterval('counter()', 1000);
//注意:执行的函数需要加引号,否则会报错的
好了,基本原理明白了,剩下的就是自己灵活运用了,可以开发一些定时器或延时器之类的东东^_^.
浏览: 607990 次
来自: 北京
文章很赞，有几个缺点：1、是你的服务端是单进程的，如果进程挂了 ...
最佳蜗牛 写道是不是缺少了一个toolbar.Realize( ...
是不是缺少了一个toolbar.Realize()?
2.7.3版本里不能显示工具栏的图标
我怎么安装的也不行？ 裸奔啊。。。。。当前位置： →
→ js中setTimeout跟setInterval工作原理有什么区别
js中setTimeout跟setInterval工作原理有什么区别
& 作者：佚名 & 来源： 互联网 & 热度：
&收藏到→_→：
摘要: js中setTimeout和setInterval工作原理有什么区别吗?请问： function&f1(){ console.log("nihao"); setTimeout("f1()",20)...
"js中setTimeout跟setInterval工作原理有什么区别"：：
js中settimeout和setinterval工作原理有什么区别吗?请问：
function&f1(){
console.log("nihao");
settimeout("f1()",20);
function&f1(){
console.log("nihao");
setinterval("f1()",20);
执行上有什么区别吗？从工作原理上分析哈。
------解决方案--------------------settimeout，一次，
setinterval，多次。
function&f1(){
console.log("nihao");
settimeout("f1()",20);//应当不写这一句，就只执行一次。
//加了这一句，则每次执行完又生成一个新的定时器。
------解决方案--------------------settimeout是指多少毫秒后执行某个函数，只执行一次，除非是他自己调用自己&类似递归
setinterval是指每隔几毫秒就执行某个函数------解决方案--------------------settimeout执行一次，setinterval执行n次，直到你clearinterval前。 搜索此文相关文章：此文来自: 马开东博客
网址: 站长QQ
上一篇：没有了
js中setTimeout跟setInterval工作原理有什么区别_JavaScript相关文章
JavaScript_总排行榜
JavaScript_最新
JavaScript_月排行榜
JavaScript_周排行榜
JavaScript_日排行榜setTimeout()和setInterval()经常被用来处理延时和定时任务。setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除。
从定义上我们可以看到两个函数十分类似，只不过前者执行一次，而后者可以执行多次，两个函数的参数也相同，第一个参数是要执行的code或句柄，第二个是延迟的毫秒数。
很简单的定义，使用起来也很简单，但有时候我们的代码并不是按照我们的想象精确时间被调用的，很让人困惑
看个简单的例子,简单页面在加载完两秒后，写下Delayed alert!
setTimeout('document.write(&Delayed alert!&);', 2000);
看起来很合理，我们再看个setInterVal()方法的例子
var num = 0;
var i = setInterval(function() {
num++;
var date = new Date();
document.write(date.getMinutes() + ':' + date.getSeconds() + ':' + date.getMilliseconds() + '&br&');
if (num & 10)
clearInterval(i);
页面每隔1秒记录一次当前时间（分钟：秒：毫秒），记录十次后清除，不再记录。考虑到代码执行时间可能记录的不是执行时间，但时间间隔应该是一样的，看看结果
时间间隔几乎是1000毫秒，但不精确，这是为什么呢？原因在于我们对定时器存在一个误解，JavaScript其实是运行在单线程的环境中的，这就意味着定时器仅仅是计划代码在未来的某个时间执行，而具体执行时机是不能保证的，因为页面的生命周期中，不同时间可能有其他代码在控制JavaScript进程。在页面下载完成后代码的运行、事件处理程序、Ajax回调函数都是使用同样的线程，实际上浏览器负责进行排序，指派某段程序在某个时间点运行的优先级。
我们把效果放大一下看看，添加一个耗时的任务
function test() {
for (var i = 0; i & 500000; i++) {
var div = document.createElement('div');
div.setAttribute('id', 'testDiv');
document.body.appendChild(div);
document.body.removeChild(div);
setInterval(test, 10);
var num = 0;
var i = setInterval(function() {
num++;
var date = new Date();
document.write(date.getMinutes() + ':' + date.getSeconds() + ':' + date.getMilliseconds() + '&br&');
if (num & 10)
clearInterval(i);
我们又加入了一个定时任务，看看结果
这下效果明显了，差距甚至都超过了3秒，而且差距很不一致。
我们可以可以把JavaScript想象成在时间线上运行。当页面载入的时候首先执行的是页面生命周期后面要用的方法和变量声明和数据处理，在这之后JavaScript进程将等待更多代码执行。当进程空闲的时候，下一段代码会被触发
除了主JavaScript进程外，还需要一个在进程下一次空闲时执行的代码队列。随着页面生命周期推移，代码会按照执行顺序添加入队列，例如当按钮被按下的时候他的事件处理程序会被添加到队列中，并在下一个可能时间内执行。在接到某个Ajax响应时，回调函数的代码会被添加到队列。JavaScript中没有任何代码是立即执行的，但一旦进程空闲则尽快执行。定时器对队列的工作方式是当特定时间过去后将代码插入，这并不意味着它会马上执行，只能表示它尽快执行。
知道了这些后，我们就能明白，如果想要精确的时间控制，是不能依赖于JavaScript的setTimeout函数的。
重复的定时器
使用 setInterval() 创建的定时器可以使代码循环执行，到有指定效果的时候，清除interval就可以，如下例
var my_interval = setInterval(function () {
if (condition) {
//..........
clearInterval(my_interval);
但这个方式的问题在于定时器的代码可能在代码再次被添加到队列之前还没有执行完成，结果导致循环内的判断条件不准确，代码多执行几次，之间没有停顿。不过JavaScript已经解决这个问题，当使用setInterval（）时，仅当没有该定时器的其他代码实例时才将定时器代码插入队列。这样确保了定时器代码加入到队列的最小时间间隔为指定间隔。
这样的规则带来两个问题
1. 某些间隔会被跳过2.多个定时器的代码执行之间的间隔可能比预期要小
为了避免这两个缺点，我们可以使用setTimeout（）来实现重复的定时器
setTimeout(function () {
setTimeout(arguments.callee, interval);
}, interval)
这样每次函数执行的时候都会创建一个新的定时器，第二个setTimeout（）调用使用了agrument.callee 来获取当前实行函数的引用，并设置另外一个新定时器。这样做可以保证在代码执行完成前不会有新的定时器插入，并且下一次定时器代码执行之前至少要间隔指定时间，避免连续运行。
setTimeout(function () {
var div = document.getElementById('moveDiv');
var left = parseInt(div.style.left) + 5;
div.style.left = left + 'px';
if (left & 200) {
setTimeout(arguments.callee, 50);
这段定时器代码每次执行的时候，把一个div向右移动5px，当坐标大于200的时候停止。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：5420次
排名：千里之外
原创：12篇
转载：16篇
(5)(9)(7)(6)(1)标签：至少1个，最多5个
发表过一片博客《跟着我用JavaScript写计时器》,比较基础.....有网友说应该写一下setTimeout的原理和机制，嗯，今天就来写一下吧：
直奔主题：setTimeout和setInterval是如何工作的呢？
我们知道，js是单线程执行的(单线程j就是说在程序执行时，所走的程序路径按照连续顺序排下来，前面的必须处理好，后面的才会执行)。所以其实setTimeout和setInterval所谓的“异步调用”事实上是通过将代码段插入到代码的执行队列中实现的。 而如何计算插入的时间点呢？自然是要用到我们所说的timer，也就是计时器。当执行setTimeout和setInterval的时候，timer会根据你设定的时间“准确”地找到代码的插入点。当队列“正常”地执行到插入点时，就触发timer callback，也就是我们设定的回调函数：
function fn() {
here is some codes
*/ alert("javascript");
setTimeout(function() {alert('ok!')},1000);
上面这个例子就是我们通常的用法，应该容易理解。可是，timer真的能那么准确么？代码队列的执行真的能那么正常么？
还记得吗？重新认识所谓的“异步”
刚刚已经知道，事实上setTimeout和setInterval只是简简单单地通过插入代码到代码队列来实现代码的延迟执行（或者说异步执行）。但是事实上所谓的异步只是一个假象——它同样运行在一个线程上！ 始终是单线程！那么问题就来了，要是在代码插入点前的代码执行时间超过了传入setTimeout或setInterval的设定时间会怎样呢？让我们来看看这段代码：
function fn() {
setTimeout(function(){alert('can you see me?');},1000);
while(true) {}
你觉得这段代码的执行结果是什么呢？答案是，alert永远不会出现。 这是为什么呢？因为，while这段代码没有执行完（如图，浏览器一直在解析while的代码），所以插入在后面的代码便永远不会执行。 综上所述，其实JS终归是单线程产物。无论如何“异步”都不可能突破单线程这个障碍。所以许多的“异步调用”（包括Ajax）事实上也只是“伪异步”而已。只要理解了这么一个概念，也许理解setTimeout和setInterval也就不难了。
0 收藏&&|&&20
你可能感兴趣的文章
2 收藏，84
6 收藏，1.4k
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
我要该，理由是：如何在JavaScript函数里实现setTimeout模仿setInterval？ - 知乎9被浏览277分享邀请回答0添加评论分享收藏感谢收起0添加评论分享收藏感谢收起