定时器

定时器

定时器的分类

• setTimeout：延迟定时器
  • 使用场景：广告弹窗
  • 语法：setTimeout(函数,时间ms) 延迟某个时间执行函数一次
• setInterval：间歇执行定时器
  • 使用场景:轮播图，倒计时，抽奖
  • 语法：setInterval(函数，时间) 间隔某个时间就执行函数一次

  • 1.2 定时器使用

setTimeout

<div>广告</div>
<script>
     var oDiv = document.getElementsByTagName("div")[0];
//延迟定时器：setTimeout(函数,时间ms) 1000ms--1s

//广告显示5秒消失
/* setTimeout(function(){
            oDiv.style.display = "none";
        },5000);  *///等待5秒执行函数

setTimeout(hide,5000);
function hide(){
    oDiv.style.display = "none";
}

</script>

setInterval

//隔2秒换一张图片
var oImg = document.getElementsByTagName("img")[0];
var n = 1;
//1.隔2000切换一次图片
setInterval(function(){
    n++;
    if(n>5){n=1}
    oImg.src = "image/"+n+".jpg";//1 2 3 4 5
},1000);

停止定时器

setInterval：定时器但凡已开启就不会主动停止

停止定时器：clearInterval(intervalId);/clearTimeout(id)

intervalId:开启定时器的时候，会返回一个能够唯一标识当前定时器的id

//2.倒计时5-0
var n = 5;
var timer = setInterval(function(){
    n--;
    //到0停止
    if(n<=0){
        n = 0;
        //停止定时器
        clearInterval(timer)
    }
    oS.innerText = n;
},1000);
console.log(timer); //1