▐ 什么是计时器?
通过使用JavaScript，我们可以做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，也称之为计时事件.
▐ 常用方法：
○ setTimeout
• 用法：setTimeout ( "函数" , "时间" )
• 含义：表示延迟 "指定时间" 后调用 "指定函数" ，且只调用一次.
⚿代码演示及解读：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> function start(){ //定时器调用函数 setTimeout("test()",2000);//延迟2s后调用test函数,只调用了一次 } function test(){ alert("javascript"); } </script> </head> <body> <input type="button" value="开始" onclick="start()"/> </body> </html>
○ clearTimeout
• 用法：clearTimeout ( "number" )
• 含义：关闭setTimeout定时器
这里的参数number是定时器开始时，setTimeout返回的一个整数编号
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> var t; //计时器setTimeout开始时会返回的一个整数编号 function start(){ //定时器调用函数 t = setTimeout("test()",2000);//延迟2s后调用test函数,只调用了一次 } function test(){ alert("javascript"); } function stop(){ //关闭定时器 clearTimeout(t); } </script> </head> <body> <input type="button" value="开始" onclick="start()"/> <input type="button" value="停止" onclick="stop()"/> </body> </html>
○ setInterval
• 用法：setInterval ( "函数" , "时间" )
• 含义：表示每隔 "指定时间" 就调用一次 "指定函数" ，只要不关闭定时器就会一直调用.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> var t; //计时器setInterva开始时会返回的一个整数编号 function start(){ //定时器调用函数 t=setInterval("test()",2000);//每隔2s就调用一次test() } function test(){ alert("javascript"); } </script> </head> <body> <input type="button" value="开始" onclick="start()"/> </body> </html>
○ clearInterval
• 用法：clearTimeout ( "number" )
• 含义：关闭setInterval定时器
同理，这里的参数number是定时器开始时，setInterva返回的一个整数编号
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> var t; function start(){ //定时器调用函数 t=setInterval("test()",2000);//每隔指定时间就调用一次 } function test(){ alert("javascript"); } function stop(){ //清除定时器 clearInterval(t); } </script> </head> <body> <input type="button" value="开始" onclick="start()"/> <input type="button" value="关闭" onclick="stop()"/> </body> </html>
▐ 结语：
计时器在网页设计中还是很常用的，比如图片自动轮播，自动切换等。这篇文章我以弹窗效果为例，主要为了方便大家理解计时器的效果；有时间的话大家可以尝试做一个图片自动切换的效果，进一步巩固这块的知识。
