1、setTimeout-----延时器
用于在指定的毫秒数后调用函数或计算表达式。只执行一次
let num=1;
setTimeout(()=>{
num++;
console.log(num);//2
},2000)
如果这个时间设为 0,就代表立即插入队列,但不是立即执行,仍然要等待前面代码执行完毕。是否及时执行取决于 JavaScript 线程是拥挤还是空闲。
2、setInterval-----定时器
每隔指定的毫秒数循环调用函数或表达式。直到clearInterval
把它清除。
let num=1;
const timer=setInterval(()=>{
num++;
console.log(num);
if(num===5){
clearInterval(timer);
}
},1000)
3、使用延时器实现定时器的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box {
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="box"></div>
<input type="button" id="btn" value="点击"/>
<script type="text/javascript">
const oBtn = document.getElementById('btn');
const oBox = document.getElementById('box');
let num = 0
function add() {
num++;
oBox.innerHTML = num;
// setTimeout("add()",1000);
setTimeout(add, 1000);
}
oBtn.onclick = function () {
add();
}
</script>
</body>
</html>