js中的setTimeout和setInterval
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>setInterval</title> <script type="text/javascript"> var i=0; var setID; function startInterval(){ setID=setInterval(function(){ console.log(i++); },1000); } function stopInterval(){ clearInterval(setID); } </script> </head> <body> <input type="button" value="开始" id="start" onclick="startInterval()"/> <input type="button" value="停止" id="stop" onclick="stopInterval()"/> </body> </html>
官方定义：setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式；
语法：setTimeout(code,milliseconds)括号里两个都是必须的参数（code:要调用的函数后要执行的 JavaScript 代码串；milliseconds:延迟的毫秒数）
需要注意的是：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
先看网上一个列子：
<html> <head> <script type="text/javascript"> function timedMsg(){ var t=setTimeout("alert('5 seconds!')",5000) } </script> </head> <body> <form> <input type="button" value="Display timed alertbox!" onclick="timedMsg()" /> </form> <p>Click on the button above. An alert box will be displayed after 5 seconds.</p> </body> </html>
当按钮被点击的时候，过5秒钟之后会弹出提示框，单人我们在function当中也没有必要采用定义变量的方式，直接使用setTimeout也是正确的
与setTimeout()对应的有clearTimeout()这个方法
定义：clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。
语法：clearTimeout(id_of_settimeout) 参数说明：id_of_settimeout由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。也可以理解这个方法值传进一个对象就可以
修改一下上面的列子：
<html> <head> <script type="text/javascript"> var c = 0; var t; function timedMsg(){ document.getElementById("test").innerHTML = c; c = c+1; t=setTimeout("timedMsg()",1000) } function stopClock(){ clearTimeout(t); } </script> </head> <body> <form> <input type="button" value="Display timed alertbox!" onclick="timedMsg()" /> <input type="button" value="stop the clock" onclick="stopClock()" /> </form> <p id="test"></p> </body> </html>
点击第一个按钮 的时候会开始计时，当点击第二个按钮的 时候会调用clearTimeout()来清除设置的时间。
到现在大家可能有点明白了setTimeout()常用的功能了吧，除了延迟你要执行的代码块或者函数之外，还有定时和时钟的功能，上面更改的例子是通过setTimeout()不断调用同一个函数来实现计时的，并没有使用setInterval()；
定义：setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法：setInterval(code,millisec）用法和setTimeout一样，但是setInterval()多了一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的返回值。
同样以上面的计时为例子：
<html> <head> <script type="text/javascript"> var c = 0; function timedMsg(){ document.getElementById("test").innerHTML = c; c = c+1; } var test = window.setInterval("timedMsg()",1000); function stopClock(){ clearInterval(test); } </script> </head> <body> <form> <input type="button" value="Display timed alertbox!" onclick="timedMsg()" /> <input type="button" value="stop the clock" onclick="stopClock()" /> </form> <p id="test"></p> </body> </html>
clearInterval()和clearTimeout()的用法相同。
