js中计时器重要使用window.setInterval()方法和window.setTimeout()方法，
其中setInterval()方法的作用是每隔一段时间执行一次方法，而window.setTimeout()在一段时间内调用函数。
setTimeout()方法一般通过调用自身迭代的方式实现计时器。与这两个方法对应的，还有清除这两个函数效果的
两个方法，分别是window.clearInterval()和window.clearTimeout()。
1.setInterval()和clearInterval() (window可以省略)
(1)setInterval()方法常用的语法如下：
setInterval(function,interval)；
其中function是将要在间隔时间内执行的函数，interval是间隔的时间，单位是毫秒。
(2)clearInterval()方法的常用语法如下：
timer = setInterval(function,interval)；
clearInterval(timer);
例子：
1 <html>
2 <head></head>
3 <body>
4 <p id="timer">点击开始计时！</p>
5 <div>
6 <button id="cutTimer" onclick="start()">开始</button>
7 <button id="cutTimer" onclick="stop()">停止</button>
8 </div>
9 <script>
10 var cutT = document.getElementById("cutTimer");
11
12 var timer1 = null;
13
14 function start(){
15 var countTime = function(){
16 date = new Date();
17 dateStr = date.toLocaleTimeString();
18 document.getElementById("timer").innerHTML = dateStr;
19 }
20
21 timer1 = window.setInterval(countTime,1000);
22
23 }
24
25
26 function stop(){
27 console.log("timer stop:"+timer1);
28 window.clearInterval(timer1);
29 };
30
31 </script>
32 </body>
33 </html>
在这个例子中，点击开始后(会有一段延迟)，页面上每隔1000毫秒（也就是1秒）执行一次，也就是显示当前的时分秒。
2.setTimeout()和clearTimeout()
这两个方法与setInterval()和clearInterval()方法用法类似，示例如下：
1 <html>
2 <head></head>
3 <body>
4 <p id="timer"></p>
5 <div>
6 <button id="cutTimer" onclick="timeOutAlert();">执行</button>
7 <button id="cutTimer" onclick="stopTimeOutAlert();">停止</button>
8 </div>
9 <script>
10 timeOut = null;
11 function timeOutAlert(){
12 timeOut = window.setTimeout(function(){
13 console.log("time out..."+timeOut);
14 timeOutAlert();
15 },1000);
16 }
17
18 function stopTimeOutAlert(){
19 console.log("timeCut:"+timeOut);
20 window.clearTimeout(timeOut);
21 }
22 </script>
23 </body>
24 </html>
可以看到timeOutAlert()方法每隔1000毫秒调用自身，在控制台打印出当前timeOut的值，timeOut第一次使用
setTimeout()后为1，每次增加1，clearTimeout()通过这个数字作为入参清除当前的setTimeout()。
时间： 2024-08-10 17:22:05