#转载请留言联系
-
定时器在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>