Js_log2000_两种定时器的异同

javascript中的两种定时器异同辨析

javascript; setInterval(); setTimeout();

javascript中有两种定时器，一种是setInterval(), 一段时间执行一次代码；另一种是setTimeout()，到达一定时间时执行一次代码

相信(Copyright © http://blog.csdn.net/s_gy_zetrov. All Rights Reserved)上面这句话已经很清晰地展示出了两种定时器的区别。

为什么javascript中定时器这么重要呢？因为javascript是单线程的，严格按照页面加载顺序进行执行。而且javascript中没有我们熟悉的sleep()或者pause()这类函数。所以定时器的应用范围很广。

特别是在使用canvas时，如果想要实现动态效果，定时器必不可少！

下面以实现canvas动态效果为例介绍两种定时器的用法。

setInterval()

setInterval(code,millisec)code    必需。要调用的函数或要执行的代码串。millisec    必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。setInterval("dynamicDrawLines_1(x,y,n)",300);var i1=1;function dynamicDrawLines_1(x,y,n){     var itvl=1;    var canvas1 = document.getElementById("canvas");     var ctx1 = canvas1.getContext("2d");    ctx1.beginPath();    ctx1.strokeStyle="#FFA500";//orange    ctx1.moveTo(x[i1],y[i1]);    ctx1.lineTo(x[i1+itvl],y[i1+itvl]);    ctx1.stroke();    ctx1.closePath();    itvl++;            i1++;}

上面代码的效果就是每隔一段时间绘制一条边，直到i1到达数组x、y的末尾。

setInterval()对应一个终止函数clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的 timeout。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

我这里没有使用claerInterval()，因为没有可以传递需求，我不需要手动终止过程，所以我没有用。

---

setTimeout()

setTimeout(code,millisec)code    必需。要调用的函数后要执行的 JavaScript 代码串。millisec    必需。在执行代码前需等待的毫秒数。setTimeout("xorLines(x,y,n)",n*500);(Copyright © http://blog.csdn.net/s_gy_zetrov. All Rights Reserved)setTimeout("xorLines(x,y,n)",n*500+500);setTimeout("xorLines(x,y,n)",n*500+700);setTimeout("xorLines(x,y,n)",n*500+900);function xorLines(x,y,n){     var canvas9 = document.getElementById("canvas");     var ctx9 = canvas9.getContext("2d");    for(var i = 2;i<n;i++){        for(var j=i+1;j<=n;j++){                  ctx9.beginPath();            ctx9.strokeStyle="#FFFFFF";            ctx9.globalCompositeOperation="xor";            ctx9.moveTo(x[i],y[i]);            ctx9.lineTo(x[j],y[j]);            ctx9.stroke();            ctx9.closePath();        }    }}

上面代码的效果就是到达一定时间时清理一次画布，到达另一个时刻再清理一次画布。setTimeout()的好处是可以确定代码执行次数，次数达到立即结束绝不多执行。(Copyright © http://blog.csdn.net/s_gy_zetrov. All Rights Reserved)

setTimeout()可以产生类似setInterval()的效果，只要

setTimeout("xorLines(x,y,n)",500);function xorLines(x,y,n){     var canvas9 = document.getElementById("canvas");     var ctx9 = canvas9.getContext("2d");    for(var i = 2;i<n;i++){(Copyright © http://blog.csdn.net/s_gy_zetrov. All Rights Reserved)        for(var j=i+1;j<=n;j++){                  ...            setTimeout("xorLines(x,y,n)",500);            ...        }    }}

在循环中再加入一个setTimeout，就会递归执行下去。但这种同样十分危险，因为无法关闭，会永远执行下去，
就像一个死循环一样，直到爆栈或者浏览器宕机。

在我的使用中，发现setInterval()与循环有冲突，尚不清楚是逻辑的冲突还是我代码的错误。但在使用中还是尽量避免setInterval()函数定时执行的代码中包含循环，因为setInterval()本事已经自动有循环执行的意义在里面了。我编写的时候就是，达不到想要实现的效果。也许后期我会再回到这个问题，并更新一下这个博客。但当前为止，我暂时将这个问题挂起了。

(Copyright © http://blog.csdn.net/s_gy_zetrov. All Rights Reserved)

---

visitor tracker

---

This is my No.100 original blogs, yeah! And 360 days ago I published my first blog. So my blog is coming to its one-year-birthday. Happy Birthday and happy anniversary buddy! We shall continue to thrive, I know we will.