下面将会讲解JavaScript里面的定时器,定时器是js原生提供的一种延迟执行代码的方式,现在在这里将其配合一些案例详细讲解一下。案例里面的代码注释有详细解释,可以帮助大家学习。
目录
定时器的分类
- 延迟定时器(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)//延时五秒
案例ÿ