js定时器

一、两种定时器

setTimeout() 延迟定时器
setInterval() 循环定时器（‘间隔器’）

区别

setTimeout是延时时间到了就去调用这个回调函数，只调用了一次 就结束了这个定时器。

setInterval是 每隔这个延迟时间 就去调用这个回调函数 会调用很多次 重复调用这个函数。应用在网页中的一些轮播图上。
setTimeout在规定时间后执行完某个操作就停止了，而setInterval则可以一直循环下去。

定时器中的函数挂载在window对象上，内部的this指向window

 setTimeout(function(){
            console.log(111);
        },1000)  //一秒钟打印出111

  setInterval(function(){
            console.log(111);
        },1000)  //每隔一秒钟打印出111

二、清除定时器

每次使用定时器时，必须清除定时器

如何清除定时器呢，每一个定时器开启后，都会返回一个对应的id，通过这个id就可以清除定时器

clearTimeout(timer) ====> 用于清除setTimeout

clearInterval(timer) ====> 用于清除setInterval

//在开启定时器的同时定义一个变量接受定时器返回的id，用于清除定时器
        var timer=setTimeout(function(){
            console.log(111);
        },1000)
        clearTimeout(timer);

        var timer2=setInterval(function(){
            console.log(111);
            clearInterval(timer2);
        },1000)

JS的单线程

单线程的理解

同时只能执行一个任务，如果后面有任务，需要等到当前任务执行完毕，才能执行后面的任务

for(var i=0;i<10;i++){
            console.log(1);
        }
        console.log(2);

js的单线程就是说上面的代码，无论for循环多么耗时，都必须先执行完，再打印2，这就会造成线程阻塞的问题

线程阻塞

前面的任务死循环或者耗时过长导致后面代码不能被执行，这种情况叫做线程阻塞。

这样会出现问题，所以对于像事件，定时器，ajax请求这种非常耗时的程序，浏览器会开辟其他的线程来处理，所以这些程序我们叫做异步程序

浏览器有三个常驻线程，JS引擎线程，界面的渲染线程，已经浏览器事件触发线程，还有一些执行完就终止的线程，比如HTTP请求线程

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

同步任务和异步任务

js的单线程意味着所有的任务需要排队，前一个任务结束，才会执行后一个任务，如果前一个任务耗时很长，后一个任务就不得不一直等着

所以JS的任务队列分为两种，同步任务和异步任务

1、同步任务：在JS主线程排队执行的任务 ===>形成执行栈

2、异步任务：不进入主线程进入‘任务队列’的任务 ===> 形成任务队列

异步任务只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行

  setTimeout(function(){
            console.log(1)
        },0)
        for(var i = 0; i< 10;i++){
            console.log(2)
        } //定时器会等待for循环执行完毕后再执行

当js遇到定时器，它会认为你特别耗时间，不管你写的时间间隔是多久，都会将匿名函数放到callback queue回调队列中，等待主线程的调用，当主线程的stack所有的任务都执行完了，再通过event loop（时间循环）把匿名函数放到stack主线程中运行