JS 45 定时器-setTimeout

103 阅读 0 评论 68 点赞

我是靠谱客的博主聪明吐司，这篇文章主要介绍JS 45 定时器-setTimeout，现在分享给大家，希望可以做个参考。

1.setTimeout定时器:在定时器到期后执行调用函数

语法:window.setTimeout(调用函数,延迟的毫秒数);
①可以省略window
②延迟时间单位为毫秒,可以省略,省略默认为0
③这个调用函数可以直接写函数,也可以写函数名

复制代码

1
2
3
4
5
setTimeout(fn,2000);
function fn(){
    alert('2s');
}

④页面中可能有很多计时器,我们通常给计时器加标识符(名字)
var timer1=setTimeout(fn,2000);
var timer2=setTimeout(fn,5000);

2.setTimeout()这个调用函数我们也称为:回调函数 callback

3.案例:做一个5s之后自动关闭的广告

思路:5s之后隐藏广告

复制代码

1
2
3
4
5
6
7
8
9
	window.onload=function(){
        var ad=document.querySelector('.ad');
        setTimeout(function(){
            ad.style.display='none';
        },5000);
    }
    
    <img src="img/李老八.jpg" alt="" class="ad">

4.停止计时器 window.clearTimeout(timeoutID);

案例:点击按钮停止计时

复制代码

1
2
3
4
5
6
7
8
9
10
11
window.onload=function(){
        var btn=document.querySelector('button');
        var timer=setTimeout(function(){
            alert('BOOM!');
        },5000);   
    btn.addEventListener('click',function(){
        clearTimeout(timer);
    });
}   
<button>停止</button>