定时器
<script>
// 定时器
// 根据设定的时间间隔,来循环执行程序
// 只要定时器不停止,程序就会一直执行
// setInterval( 参数1 , 参数2 )
// 参数1:要执行的程序,必须是一个函数的形式 function(){ 定义程序 }
// 参数2:执行程序的间隔时间 单位是毫秒
// 时间间隔不能无限小,与计算机的刷新频率有关
// 60Hz 60赫兹 代表,1秒刷新60次
// 1次就是 1000 / 60 ---- 16.666... 毫秒
// 你定义的程序的时间间隔,不能小于 16.6666... 毫秒
// 我们一般都定义最少 0.1秒,也就是 100毫秒
// 每间隔1000毫秒,也是一秒,重复执行 function(){}中的程序
// 将定时器,存储在一个变量中
var interval1 = setInterval( function(){
document.write('张老师帅极了' + '<br>');
} , 1000);
var interval2 = setInterval( function(){
document.write('张老师不仅帅,还是非常帅' + '<br>');
} , 1000);
// 终止定时器
// 要终止定时器的执行,需要有两个条件
// 1,使用一个变量,来存储定时器
// 2,使用清除定时器方法,参数是这个定时器的变量
// 如果程序中,有多个定时器,清除哪个,就停止哪个
// 即时写多个参数,也只对第一个参数清除定时器
clearInterval(interval1);
// 如何间隔一段时间,再来停止定时器?
// 定义一个变量,来存储执行的次数
// 定义一个变量,存储执行次数
var int = 0;
var interval3 = setInterval( function(){
document.write('张老师不仅帅,还是非常帅' + '<br>');
// 每次执行,变量自增
int++;
// 当满足某个我们设定的条件时
if(int == 10){
// 清除定时器,终止程序的执行
clearInterval(interval3);
}
} , 1000);
console.log(interval3);
// 说明:
// 变量中,到底存储的是什么?
// 变中,存储的是当前 这个定时器 的 序号
// 这个序号,表示当前这个定时器,是整个程序中的第几个定时器
// 编号是从1开始编号的
// 所谓的清除定时器,实际上就是关闭整个程序中的第几个定时器
// 将定时器赋值给变量,只是将定时器的序号赋值给变量,不会影响定时器的执行
</script>
延时器
<script>
// 延时器
// 按照设定的时间,延迟程序的执行
// 延时器中的程序,只能执行一次
// 可以简单的理解为 定时炸弹 到了指定的时间就会执行,并且只会执行一次
// 语法:
// setTimeout( 函数 , 延迟的时间 );
// 第一个参数,也是函数形式,来定义要执行的程序内容
// 第二个参数,定义延迟时间,单位也是毫秒
setInterval(function(){} , 1000);
// 延时5秒钟之后,执行程序
var timeout1 = setTimeout( function(){
console.log('张老师还是很帅的');
} , 5000 )
console.log(timeout1);
// 清除延时器
// 使用给一个变量存储延时器
// 清除延时器,参数是这个变量
clearInterval(timeout1);
// 特别说明
// 1, 变量存储的也是序号,表示的是第几个延时器
// 2, JavaScript中,定时器和延时器,的计数是不做区分的
// 也就是第几个定时器,和第几个延时器,是一起计算的,不做区分
// setInterval(function(){} , 1000); 1
// setInterval(function(){} , 1000); 2
// settimeout(function(){} , 1000); 3
// setInterval(function(){} , 1000); 4
// settimeout(function(){} , 1000); 5
// 3, clearInterval 和 clearTimout 是不做区分的
// clearInterval 可以清除定时器,也可以清除延时器
// clearTimout 可以清楚延时器,也可以清除定时器
</script>
案例
延时器
<div id="d">
<button id="btn">关闭</button>
我是一个广告内容
</div>
<script>
// 点击button按钮
// 点击事件,咱们之后再讲,先理解思路方法
btn.onclick = function(){
// 设定div的显示属性为none,隐藏消失
d.style.display = 'none';
// 定义一个延时器,间隔一段时间之后,再给div演示属性设定为block,再次显示
setTimeout(function(){
d.style.display = 'block';
} , 1000);
}
</script>
定时器
// 定时器的最后一个小问题
// 定时器最大的问题
// 程序的第一次执行,是在间隔规定的时间之后,才会执行
// 在走完第一个时间间隔之前,程序是不会执行的
// 为了防止时间间隔执行完毕之前,页面没有执行结果
// 会将程序,先 提前执行一次
// 为了防止5秒钟之内,页面内有输出内容
document.write('张老师和鹏哥比,谁更帅?还用问吗,当然是张老师'+'<br>');
// 第一次向页面输出内容,是在间隔规定的5秒之后
setInterval( function(){
document.write('张老师和鹏哥比,谁更帅?还用问吗,当然是张老师'+'<br>');
} , 5000 )
