计时器 · JavaScript学习

# 计时器 [TOC] ## 计时事件　　通过使用JavaScript我们可以做到再一个设定的时间间隔之后执行代码,而不是在函数调用之后立即执行，我们称之为计时事件。 ## 计时方法 * `setInterval()` 间隔制定的毫秒数不停的执行指定的代码 * `clearInterval()` 用于停止`setInterval()`方法执行的函数代码 * `setTimeout()` 暂停指定的毫秒数后指定指定的代码 * `clearTimeout()` 方法用于停止执行`setTimeout()`方法的函数代码 ### 示例1 ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>时钟效果</title> </head> <body> <button id="btn">时间静止</button> <p id="ptime"></p> <script> var mytime = setInterval(getTime,1000); function getTime(){ var dObj = new Date(); var tString = dObj.toLocaleTimeString(); document.getElementById('ptime').innerHTML = tString; } var btn = document.getElementById('btn'); btn.addEventListener('click',function(){ window.clearInterval(mytime); }); // 点击按钮清除定时器执行 </script> </body> </html> ~~~ ### 示例2 ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>时钟效果</title> </head> <body> <button id="btnstart">开始计时</button> <button id="stopbtn">停止计时</button> <script> var win; var i = 1; var btnstart = document.getElementById('btnstart'); var stopbtn = document.getElementById('stopbtn'); // 延时执行函数 function myWin(){ // win = setTimeout(function(){alert(i)},3000); // 只调用一次 win = setTimeout(function(){myWin();},3000); // 每隔三秒不断的调用自己 console.log(i++); } btnstart.addEventListener('click',myWin); //点击开始按钮执行定制器 stopbtn.addEventListener('click',function(){clearTimeout(win)}); // 点击停止按钮执行清除定时器的操作 </script> </body> </html> ~~~