【面向JS--定时器】

最新推荐文章于 2024-06-24 14:30:19 发布

hfhan_872914334

最新推荐文章于 2024-06-24 14:30:19 发布

阅读量232

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/hf872914334/article/details/78488563

版权

javascript 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

定时器分为周期性定时器和一次性定时器

周期性定时器: 让程序每隔一段时间间隔，反复执行一项任务

如何使用: 3步：

1、声明任务函数: 定时器每次执行的任务
    function task(){...}
    任务函数通常要自己考虑:何时停止定时器的临界值

2、将任务函数放入定时器，定时执行:
    timer=setInterval(task,interval)
    其中: interval 是间隔的毫秒数
         timer往往是一个全局变量: 用来保存当前定时器的序号
         序号是内存中唯一标识一项任务的编号
    原理：首先将task函数对象和interval时间间隔记录在定时器对象中，再返回当前任务的序号
    然后，定时器会按照指定时间间隔，将task函数定时加入回调队列(callback queue)中。
    只有ECS中没有正在执行的函数时，才将callbackqueue中的函数加入ECS中执行
3、停止定时器:
    clearInterval(timer);//根据序号关闭定时器

一次性定时器: 先等待一段时间，再自动执行一次任务

如何使用: 3步：

1、声明任务函数: 
    function task(){...}
2、启动一次性定时器
    timer=setTimeout(task,wait)
    其中: wait是等待的毫秒数
3、停止一次性定时器: 其实是停止等待，不再执行任务
    clearTimeout(timer);
    timer=null;

其实: 一次性定时器连续启动，也可实现周期性的效果
区别: 任务函数的结尾: 
     周期性定时器任务: 判断何时停止定时器
     一次性定时器任务: 判断何时启动定时器

<!DOCTYPE html>
<html>
 <head>
  <title>倒计时</title>
  <meta charset="utf-8"/>
 </head>

 <body>
    <h1>元旦倒计时：<span id="time"></span></h1>
    <button id="btn">||</button>
<script>
    var span=document.getElementById("time");
    function task(){
        var now=new Date();
        var Y = now.getFullYear()+1;
        var target=new Date(Y+"/01/01");
        var s=parseInt((target-now)/1000);
        if(s>0){//有一秒延迟
            var days=parseInt((s/3600/24));
            var hs=parseInt(s/3600%24);
            var ms=parseInt(s/60%60);
            var ss=s%60;
            span.innerHTML=`${days}天${hs}小时${ms}分${ss}秒`;
        }else{
            clearIntserval(timer);
            span.innerHTML=`元旦快乐`;
        }
    }
    var timer=setInterval(task,1000);//("task();",1000);
    var btn=document.getElementById("btn");
    btn.onclick=function(){
        if(this.innerHTML=="||"){
            clearInterval(timer);
            this.innerHTML="|>";
        }else{
            timer=setInterval(task,1000);
            this.innerHTML="||";
        }
    }
</script>
 </body>
</html>

注意：无论是 setInterval 还是 setTimeout，在函数的执行队列里，永远在最后执行，哪怕他写在前面

function test(){
    setTimeout(function(){console.log("timeout")},0);
    for(var i=0;i<5;i++){
        setTimeout(function(){console.log(i)},1000);
    }
}
test();
//5
//5
//5
//5
//5
//timeout