定时器 延时器

定时器

 <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 )