定时器
一、setTimeout(函数或者调用的函数,时间)
1.调用函数这里可以直接将函数写在这里,比较多的话,就直接写函数名,当然,还可以写在这里写‘函数名()’,不过不提倡这种方法,你不觉得这种比较麻烦吗?时间代表延迟的毫秒数,单位是ms。
2.举例一:2s以后,调用函数,打印出“爆炸啦!”。
<body>
<!-- 第一 -->
<!-- <script>
function explode() {
console.log('爆炸啦!');
}
setTimeout(explode, 2000);
</script> -->
<!-- 第二 -->
<!-- <script>
function explode() {
console.log('爆炸啦!');
}
setTimeout('explode()', 2000);
</script> -->
<!-- 第三 -->
<script>
setTimeout(function explode() {
console.log('爆炸啦!');
}, 2000);
</script>
</body>
3.举例二:3s以后,调用函数,广告消失不见。
<img src="imgs/ad.jpg" class="ad">
<script>
var ad=document.querySelector('.ad');
setTimeout(function hide() {
ad.style.display='none';
},3000);
</script>
4.停止计时器:本来2s后会爆炸,但是在2s之内点击按钮后,会调用清除定时器,定时器就不存在,不会调用爆炸的函数,然后就不会爆炸了。
<button>停止计时,我要护住她!</button>
<script>
var btn = document.querySelector('button');
var timer = setTimeout(function explode() {
console.log('爆炸啦!');
}, 2000);
btn.addEventListener('click', function() {
clearTimeout(timer);
})
</script>
看视频学习,积累经验,共同分享。