JavaScript定时器原理详解
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
JavaScript定时器原理详解
⽬录
⼀、 setTimeout() 定时器
⼆、停⽌ setTimeout() 定时器
三、setInterval() 定时器
四、清除setInterval() 定时器
五、电⼦时钟案例
前⾔：
在很多页⾯中，我们都可以看到⼀些倒计时或者和时间相关的效果，今天⼩熊将就JavaScript⾥⾯的倒计时做⼀概述。
⾸先，我们先来看看定时器，在JS中，有两种定时器：
⼀、 setTimeout() 定时器
语法：
window.setTimeout(调⽤函数, [延迟的毫秒数]);
setTimeout()⽅法⽤于设置⼀个定时器，该定时器在定时器到期后执⾏调⽤函数。
例如：写⼀个页⾯，让其五秒钟后弹出‘你好’。
代码如下：
window.setTimeout(function(){
alert('你好');
},5000);
运⾏结果为：
需要注意的是：
window 可以省略。
这个调⽤函数可以直接写函数，或者写函数名或者采取字符串‘函数名()'三种形式。
延迟的毫秒数省略默认是 0，如果写，必须是毫秒。
setTimeout()这个调⽤函数我们也称为回调函数callback，普通函数是按照代码顺序直接调⽤。
⽽这个函数，需要等待时间，时间到了才去调⽤这个函数，因此称为回调函数。
⼆、停⽌ setTimeout() 定时器
当我们创建了⼀个定时器的话，如果我们想要将其取消，应该怎样操作呢？就⽤到了清除定时器的函数，如下：
window.clearTimeout(timeoutID)
clearTimeout()⽅法取消了先前通过调⽤setTimeout()建⽴的定时器。
这⾥⾯window 可以省略，并且⾥⾯的参数就是定时器的标识符。
举个例⼦：
就上述案列，如果我们想要在指定事件前停⽌它，可以先添加⼀个点击按钮，给这个按钮添加清除定时器的事件，操作为：
var hello = window.setTimeout(function(){
alert('你好');
},5000);
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
window.clearTimeout(hello);
})
运⾏效果为：
可以看到，当我们没有点击停⽌按钮的时候，五秒钟后弹出‘你好’，刷新页⾯后，当我们点击按钮后，不论过多久，都不会有弹窗，清除定时器成功。
三、setInterval() 定时器
我们再来看看另⼀种定时器。
window.setInterval(回调函数, [间隔的毫秒数]);
setInterval()⽅法重复调⽤⼀个函数，每隔这个时间，就去调⽤⼀次回调函数。
window 可以省略。
这个调⽤函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种形式。
间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表⽰每隔多少毫秒就⾃动调⽤这个函数。
我们经常给定时器赋值⼀个标识符。
第⼀次执⾏也是间隔毫秒数之后执⾏，之后每隔毫秒数就执⾏⼀次。
举个例⼦：
我们来写⼀个定时器，让其每隔⼀秒就打印⼀个‘你好’，代码为：
setInterval(function(){
console.log('你好')
},1000);
运⾏效果为：
四、清除setInterval() 定时器
同样的，我们也可以清除setInterval() 定时器的效果，语法为：
window.clearInterval(intervalID);
clearInterval()⽅法取消了先前通过调⽤setInterval()建⽴的定时器。
注意：
window 可以省略。
⾥⾯的参数就是定时器的标识符。
⽐如我们现在有两个按钮，点击⼀个可以开启定时器，点击另⼀个可以清除该定时器，操作⽅法为：
<body>
<button class='begin'>开始</button>
<button class='stop'>停⽌</button>
<script>
var btn = document.querySelectorAll('button');
var timer = null;
btn[0].addEventListener('click',function(){
timer = setInterval(function(){
console.log('你好');
},1000)
})
btn[1].addEventListener('click',function(){
clearInterval(timer)
})
</script>
</body>
运⾏效果为：
五、电⼦时钟案例
我们现在就可以做⼀个电⼦时钟，显⽰当前的年⽉⽇时分秒，并让他们⾃动变化，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 500px;
margin: 100px auto;
font-size: 25px;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div');
function showTime(){
var date = new Date();
var y = date.getFullYear();
var m = date.getMonth()+1;
m = m>=10?m:'0'+m;
var d = date.getDate();
d = d>=10?d:'0'+d;
var h = date.getHours();
h = h>=10?h:'0'+h;
var dm = date.getMinutes();
dm = dm>=10?dm:'0'+dm;
var ds = date.getSeconds();
ds = ds>=10?ds:'0'+ds;
var str = y+'年'+m+'⽉'+d+'⽇ '+h+'时'+dm +'分'+ds+'秒';
div.innerHTML = str;
setTimeout(showTime,1000);
}
window.onload = showTime();
</script>
</body>
</html>
运⾏效果为：
到此这篇关于JavaScript定时器原理的⽂章就介绍到这了,更多相关JavaScript定时器内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。