JS14- 定时器和延时器

定时器和延时器
        定时器: setInterval( 参数1 , 参数2 )
                参数1: 必须是函数的形式,定义的是执行的程序
                参数2: 定义时间间隔,每单位是毫秒
                按照设定的间隔时间,循环执行设定的程序,直到清除定时器

        延时器: setTimeout( 参数1 , 参数2 )
                参数1: 必须是函数的形式,定义的是执行的程序
                参数2: 定义时间延迟,每单位是毫秒
                按照延迟的事件,执行程序

        清除定时器延时器
                clearInterval()    clearTimeout()

        说明:
            定时器和延迟器,都是 异步 程序
            定时器,最开始,不会马上执行程序,要间隔指定的时间之后,才会执行,为了防止没右输出内容,会提前先执行程序一次
            定时器,延时器要存储在变量中,变量中存储的是,定时器,延时器的顺序,也就是,是整个程序中的第几个定时器,延时器
            定时器,延时器的计数是统一执行的,是不做区分的
            清除定时器和延时器两个方法,可以混用

一.定时器

根据设定的时间间隔,来循环执行程序
只要定时器不停止,程序就会一直执行

1.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);

2.终止定时器
要终止定时器的执行,需要有两个条件
1,使用一个变量,来存储定时器
2,使用清除定时器方法,参数是这个定时器的变量

如果程序中,有多个定时器,清除哪个,就停止哪个
即使写多个参数,也只对第一个参数清除定时器
clearInterval(interval1);

3.如何间隔一段时间,再来停止定时器?
定义一个变量,来存储执行的次数

定义一个变量,存储执行次数

var int = 0;
var interval3 = setInterval( function(){
    document.write('张老师不仅帅,还是非常帅' + '<br>');
    // 每次执行,变量自增
    int++;

    // 当满足某个我们设定的条件时
    if(int == 10){
        // 清除定时器,终止程序的执行
        clearInterval(interval3);
    }
} , 1000);

console.log(interval3);

说明:
变量中,到底存储的是什么?
变中,存储的是当前 这个定时器 的 序号
这个序号,表示当前这个定时器,是整个程序中的第几个定时器
编号是从1开始编号的
所谓的清除定时器,实际上就是关闭整个程序中的第几个定时器

将定时器赋值给变量,只是将定时器的序号赋值给变量,不会影响定时器的执行

4.定时器的最后一个小问题

定时器最大的问题
程序的第一次执行,是在间隔规定的时间之后,才会执行
在走完第一个时间间隔之前,程序是不会执行的

为了防止时间间隔执行完毕之前,页面没有执行结果
会将程序,先 提前执行一次

为了防止5秒钟之内,页面内有输出内容
document.write(‘张老师和鹏哥比,谁更帅?还用问吗,当然是张老师’+’
’);

第一次向页面输出内容,是在间隔规定的5秒之后
setInterval( function(){
document.write(‘张老师和鹏哥比,谁更帅?还用问吗,当然是张老师’+’
’);
} , 5000 )

二.延时器

按照设定的时间,延迟程序的执行
延时器中的程序,只能执行一次
可以简单的理解为 定时炸弹 到了指定的时间就会执行,并且只会执行一次

语法:
setTimeout( 函数 , 延迟的时间 );
第一个参数,也是函数形式,来定义要执行的程序内容
第二个参数,定义延迟时间,单位也是毫秒

setInterval(function(){} , 1000);

延时5秒钟之后,执行程序

var timeout1 = setTimeout( function(){
    console.log('张老师还是很帅的');
} , 5000 )    
console.log(timeout1);

清除延时器
使用给一个变量存储延时器
清除延时器,参数是这个变量

clearInterval(timeout1);

延时器的小demo

三.特别说明

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 可以清楚延时器,也可以清除定时器