JavaScript定时器详解，配合案例讲解

下面将会讲解JavaScript里面的定时器，定时器是js原生提供的一种延迟执行代码的方式，现在在这里将其配合一些案例详细讲解一下。案例里面的代码注释有详细解释，可以帮助大家学习。

目录

定时器的分类

延迟定时器（setTimeout）

语法：

三种setTimeout书写方式

案例：点击按钮间隔3秒出现弹窗

案例：打开页面后间隔5秒显示图片

间隔定时器（setInterval）

语法：

书写方式举例

案例：图片切换

案例：10s的倒计时

定时器的区别：

清除定时器

案例：验证码倒计时

---

定时器的分类

- 延迟定时器（setTimeout）--将代码延迟多长时间执行

- 间隔定时器（setInterval）--将代码每隔多长时间执行一次

延迟定时器（setTimeout）

语法：

setTimeout(函数，时间)

函数：需要延迟执行的代码

时间：隔多长时间执行 单位：毫秒  1000毫秒=1秒

三种setTimeout书写方式

//延时3s在控制台打印：我被执行了
//第一种方式，把函数写在setTimeout里面

setTimeout(function(){
console.log('我被执行了');
},3000)

//第二种方式，在setTimeout写函数名字

setTimeout(fun,3000)
function fun(){
alert('我是延迟定时器')    

}

//第三种方式，在setTimeout里面“调用”函数，别忘了加单引号否则setTimeout不起效果

setTimeout('fun()',3000)
function fun(){
    alert('我是延迟定时器')    
}

案例：点击按钮延时3秒出现弹窗

//点击按钮，3s后弹窗显示信息：我是延迟定时器
//记得别忘了在h5里面写上按钮
document.querySelector('button').onclick=function(){//按钮的点击事件
setTimeout(fun,3000)//延时3s
}

function fun(){
    alert('我是延迟定时器')   
}

效果：点击按钮3s后

案例：打开页面后间隔5秒显示图片

<img src="../img/a1.jpg" alt="" srcset="">
/*图片在此，样式设置为display='none'使其不可见*/
/*多余样式设置不做赘述*/

var img=document.querySelector('img')

setTimeout(function(){

img.style.display='block'//在此设置display='block'使图片可见

},5000)//延时五秒

案例ÿ