14-定时器
在js中的定时器分两种：1、setTimeout() 2、setInterval()
1.setTimeOut()
只在指定时间后执行一次
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> //定时器 异步运行 function hello(){ alert("hello"); } //使用方法名字执行方法 var t1 = window.setTimeout(hello,1000); var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 window.clearTimeout(t1);//去掉定时器 </script> </body> </html>
setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()
2.setInterval()
在指定时间为周期循环执行
/实时刷新 时间单位为毫秒
setInterval('refreshQuery()',8000);
/* 刷新查询 */
function refreshQuery(){
console.log('每8秒调一次')
}
两种方法根据不同的场景和业务需求择而取之，
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
对于这两个方法，需要注意的是如果要求在每隔一个固定的时间间隔后就精确地执行某动作，那么最好使用setInterval，而如果不想由于连续调用产生互相干扰的问题，尤其是每次函数的调用需要繁重的计算以及很长的处理时间，那么最好使用setTimeout
案例1：定时器制作的小球滚动动画。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ height: 100px; width: 100px; border-radius:50%; background-color: red; } #move2{ display: none; margin-left: 500px;: } #move{ display: block; } </style> </head> <body> <div class="box" id='box'></div> <button id="move">开始滚动</button> <button id="move2">滚回去</button> <script type="text/javascript"> var oApp = document.getElementById('box'); var moveBtn = document.getElementById('move'); var reRmove=document.getElementById('move2'); var count = 0; var timer = null; moveBtn.onclick = function (){ timer = setInterval(function(){ count+=3; if (count>=500) { reRmove.style.display='block'; moveBtn.style.display='none'; clearInterval(timer); } oApp.style.marginLeft = count + 'px'; },30); } reRmove.onclick=function remob(){ timer = setInterval(function(){ count-=3; if (count<=0) { reRmove.style.display='none'; moveBtn.style.display='block'; clearInterval(timer); } oApp.style.marginLeft = count + 'px'; },30); } </script> </body> </html>
案例2：制作动态进度条：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <style> #myProgress { width: 100%; height: 30px; position: relative; background-color: #ddd; } #myBar { background-color: #4CAF50; width: 10px; height: 30px; position: absolute; } </style> <body> <h1>JavaScript 进度条</h1> <div id="myProgress"> <div id="myBar"></div> </div> <br> <button onclick="move()">点我</button> <script> function move() { var elem = document.getElementById("myBar"); var width = 0; var id = setInterval(frame, 10); function frame() { if (width == 100) { clearInterval(id); } else { width++; elem.style.width = width + '%'; } } } </script> </body> </html>
案例3：控制时间的停止：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>显示当前时间:</p> <p id="demo"></p> <button onclick="myStopFunction()">停止时间</button> <script> var myVar = setInterval(function(){ myTimer() }, 1000); function myTimer() { var d = new Date(); var t = d.toLocaleTimeString(); document.getElementById("demo").innerHTML = t; } function myStopFunction() { clearInterval(myVar); } </script> </body> </html>
案例4：隔段时间切换背景色：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>以下实例中，setInterval() 方法每 300 毫秒执行 setColor() 函数 ，该函数可以切换背景颜色。</p> <button onclick="stopColor()">停止切换</button> <script> var myVar = setInterval(function(){ setColor() }, 300); function setColor() { var x = document.body; x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow"; } function stopColor() { clearInterval(myVar); } </script> </body> </html>
