JavaScript中的定时器
#转载请留言联系
-
定时器在javascript中的作用
1、定时调用函数
2、制作动画
-
定时器的使用
setTimeout 只执行一次的定时器 clearTimeout 关闭只执行一次的定时器
setTimeout的常见场景: 页面的定时跳转, 定时弹窗
setInterval 反复执行的定时器 clearInterval 关闭反复执行的定时器
-
setTimeout
setTimeout(定时执行的函数,定时的时间间隔[毫秒]); //只能执行一次
示例(打开网页3秒后弹窗):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> setTimeout(func,3000); function func(){ alert("吓你一跳信不信"); } </script> </body> </html>
注意:3000表示3000毫秒,即是3秒!
-
setInterval
setInterval(定时执行的函数,定时的时间间隔[毫秒]); //没隔多久执行一次
示例(每隔0.5秒a进行自加1):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var a=1; setInterval(func,500); function func(){ console.log(a) a++; } </script> </body> </html>
-
clearTimeout
清除执行一次的定时器。
示例(别弹窗!):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="button" value="3s内按下不会弹窗" id="button"> <script> var ret=setTimeout(func,3000); function func(){ alert("吓死你"); } var box=document.getElementById('button'); box.onclick=function(){ clearTimeout(ret) } </script> </body> </html>
-
clearInterval
清除反复执行的定时器。
示例(倒计时,从10开始,倒计到0结束。):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1 id="box">10</h1> <script> var box=document.getElementById("box"); var ret=setInterval(func,1000); function func(){ //到0了停止倒计时 if(box.innerHTML==0){ clearInterval(ret); alert("新年快乐!!!") }else{ //没有到0,继续减 box.innerHTML=parseInt(box.innerHTML)-1; } } </script> </body> </html>
代码成就万世基积沙镇海,梦想永在凌云意意气风发。