setTimeout(调用函数,[延迟的毫秒数]);
用于设置一个定时器 该定时器在定时器到期后执行调用函数
案例:
3秒后显示log打印结果
<script>
//方法一
// setTimeout(function() {
// console.log('到时间了');
// }, 3000);
//方法二 调用函数的方式
function back() {
console.log('niho');
}
setTimeout(back, 3000)
</script>
如果一个页面有多个定时器 为了区分 可以给定时器设置一个变量名 即可
<script>
//方法一
// setTimeout(function() {
// console.log('到时间了');
// }, 3000);
//方法二 调用函数的方式
function back() {
console.log('niho');
}
var time1 = setTimeout(back, 3000)
var time2 = setTimeout(back, 5000)
</script>
clearTimeout() 停止定时器
括号里写的是定时器的名字
案例:点击按钮 停止定时器 不再执行此定时器
<body>
<button>停止定时器</button>
<script>
var btn = document.querySelector('button')
var timer = setTimeout(function() {
console.log('我要爆炸了');
}, 5000);
btn.onclick = function() {
clearTimeout(timer)
}
</script>
</body>
setInterval(调用函数,[延迟的毫秒数])
与setTimeout的区别是
这个是每间隔几秒就会执行一次函数 会调用很多次
重复调用这个函数
<script>
setInterval(function() {
console.log('重复调用');
}, 3000);
</script>
clearInterval() 清除定时器
这个是清除重复调用的定时器 就是上面那个
setInterval
案例:
注意:1、setInterval定时器是重复调用的 所以是用addEventListener监听器
2、下面的变量timer不能直接在监听器里声明 在函数内部声明是局部变量 下面的关闭函数会获取不到这个变量 显示timer会定义 所以把timer定义为null 意思设置为一个空对象 然后把定时器赋值给这个timer空对象
<body>
<button class="begin">开启定时器</button>
<button class="stop">关闭定时器</button>
<script>
var begin = document.querySelector('.begin')
var stop = document.querySelector('.stop')
var timer = null; //null 意思存放的是一个空对象
begin.addEventListener('click', function() {
timer = setInterval(function() {
console.log('开始了');
}, 1000)
})
stop.addEventListener('click', function() {
clearInterval(timer)
})
</script>
</body>