注意点——setTimeout、setInterval使用

setTimeout和setInterval

setTimeout的使用

setTimeout(cb, time);复制代码

setTimeout传入的是两个参数，第一个参数是cb表明的是回调函数callback，第二个表明的是时间，以ms计算

setInterval的使用

setInterval(cb, time);复制代码

setInterval传入的也是两个参数，第一个参数是cb表明的是回调函数callback，第二个表明的也是时间，以ms计算

setTimeout和setInterval的区别和注意点

区别

setTimeout含义是定时器，到达必定的时间触发一次，可是setInterval含义是计时器，到达必定时间触发一次，而且会持续触发

相互之间的转换

function run() {
    //其余代码
    setTimeout(function(){
        run();
    }, 10000);
}
setInterval(function(){
    run();
}, 10000);复制代码

• 上面的代码仍是有区别的：
  第一段代码使用的是setTimeout来实现的，这个实现就有一个缺点，就是setTimeout是在代码的执行时间上加10秒，好比run()执行了100s,而整个过程多是110s，
  第二段代码就不同了，setInterval是当run()跑了不到10s，那么就是10s走一回，若是setInterval大于10s，咱们后面详解。

你真的了解么————setInterval

setInterval(function(){
    // ...
}, 100)复制代码

咱们先思考三种状况

• 第一个当执行时间小于100ms的时候

小于100ms

• 第二个大于100ms时，如150ms这样的在第二个周期以内
  当执行完后他会当即触发第二次

100ms～200ms之间

• 那咱们来看一下第三种状况，如500ms，远远大于100ms
  其实根据setInterval的机制，他会抛弃掉中间所发生的，咱们用图表来看一看就明白了

远大于100ms

你真的了解——setTimeout

第一个，常常会出错的问题就是setTimeout中的this

var i = 0;
const o = {
    i: 1;
    fn: function(){
        console.log(this.i);
    }
}
setTimeout(o.fn, 1000); //0复制代码

这里能够看出，若是是o对象调用的话，就会是1，可是他输出的确实0，由于有两点缘由：
1.setTimeout是运行在全局环境下的
2.其实他是发生了下面的步骤：

var a = o.fn;
a();
//只有这样，this才会被绑定到全局上去复制代码

第二个，setTimeout还能干什么？

其实不是的，咱们先来看一下，setTimeout的一个面试中常常会问到的问题

setTimeout(function(){
    console.log(1);
},0);
console.log(2);复制代码

其实这个特性说来话长，输出的是先2后1，由于setTimeout会把第一个函数放进任务队列，而后走一个event loop，因此会先输出的是2，才会输出1

那咱们试想一下，这个特性咱们能够用来作什么？当事件冒泡的时候，会正常状况下，会先触发子元素，而后在触发父元素，那么咱们使用这个特性是否是能让其先触发父元素，在触发子元素，(题主没试过)

备注：
若是以为写的好，动动手指点个赞，若是想要关注我，能够去在下的github点个赞，我会坚持输出，致敬共同努力的同志们🙏

知识源于网络，实践产生真知，若有雷同，侵删。