setTimeout和setInterval

2018.9.17 星期一 15：35

计时器

计时器：00:00:00 0 h:m:s hm(100ms)
demo

timer的count写法

setTimeout递归跑时间长了要比setInterval慢一点
从api作用上来讲，该demo也是使用setInterval的：render中间的跳过可以不用处理，保证count+=.1 就ok了

var Timer={
    // paused:true,
    el:null,
    tid:null,
    count:0,
    start:function(){
        // this.paused=false;
        this.tid=setInterval(()=>{
            this.count=this.count+0.1
            this.render(this.count)
        },100)
        /* this.tid=setTimeout(()=>{
            this.count=this.count+0.1
            this.render(this.count)
            this.start()
        },100) */
    },
    render:function(c){
        this.el.innerHTML=formatT(c);
    },
    pause:function(){
        // this.paused=true

        clearTimeout(this.tid)
        this.tid=null
    },
    // clear:()=>{  // error: this指向window,定义时所在的对象，而不是使用时所在的对象。
    clear:function(){
        clearTimeout(this.tid)
        this.tid=null
        // this.paused=false
        this.count=0
        this.render(this.count)
    }
}

timer 的其他方法

用h/m/s ++ 的方法:
2.1 定义类的时候需要添加h/m/s的属性，本例使用一个count属性就可以了
区别就是需要把count格式化，在使用setInterval的基础上影响可以不计
2.2 而且需要做判断 h/m/s>60, 百毫秒的话 hm>9

setTimeout和setInterval

setInterval 是持续占有独立线程的一个定时触发函数！
嵌套setTimeout，实现的功能和前者一样！但是不会持续占有一个线程的资源，
执行完当前的方法，会释放当然的线程资源，等待下次触发，会重新申请资源！

实际的情况是javascript都是以单线程的方式运行于浏览器的javascript引擎中的,
settimeout和setinterval的作用只是把你要执行的代码在你设定的一个时间点插入js引擎维护的一个代码队列中,
插入代码队列并不意味着你的代码就会立马执行的,理解这一点很重要.
而且settimeout和setinterval还有点不一样。

### $_PS: setInterval 不能保证按照所给定的间隔时间执行，会跳过

可能你还会认为代码队列后面又会继续插入一份process代码…真实的情况是,
由于代码队列中已经有了一份未执行的process代码, 所以605ms这个插入时间点将会被”无情”的跳过, 因为js引擎只允许有一份未执行的process代码

用setTimeout递归就不会产生时间点被跳过的问题

setTimeout(function(){
    //processing 
    setTimeout(arguments.callee, interval); 
}, interval);

setInterval可能会出现调用时间间隔不准的问题，不能保证按照所给定的间隔时间执行。
比如调用的函数执行时间超过了间隔时间，那么在前一个调用还没有结束的时候后一个调用已经启动了。这里带来的问题是如果后一个调用需要以前一个调用为基础的话，就会出错。

2018.9.17 星期一 15:53