js定时器

定时器

一、两种定时器

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)

三、关于定时器函数的参数

定时器可以接受多个参数

1、第一个参数是执行的函数，必须传递，不传没什么意义，会报错

2、第二个参数为定时器执行的毫秒数，可以不传

3、第三个之后的所有参数，都将是第一个参数函数执行的实参

//没有第二个参数会立即执行
        setTimeout(function(){
            console.log(111);
        })

        setTimeout(function(a,b){
            console.log(a,b);
        },1000,10,20)

HTML5标准规定了setTimeout()的第二个参数的最小值（最短间隔）,不得低于4毫秒，如果低于这个值，就会自动增加，在此之前，老版本的浏览器都将最短间隔设为10毫秒，不同的浏览器实现不同

四、关于定时器的第一个参数

4.1、匿名函数

 setTimeout(function(){
            console.log(111);
        },1000)

4.2、有名函数

  setTimeout(function haha(){
            console.log(111);
        },1000)

4.3、有名函数的函数名

 function haha(){
            console.log(111);
        }
        setTimeout(haha,1000)

4.4、能被当成js语句执行的字符串

setTimeout('console.log(111)',1000)

五、JS的单线程

5.1、单线程的理解

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

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

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

5.2、线程阻塞

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

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

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

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

5.3、同步任务和异步任务

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主线程中运行

5.4、JS代码的执行顺序

先执行主程序的任务，当主程序的所有任务都执行结束，再把任务队列中的任务放到主程序中执行

1、所有的同步任务都在主线程上执行，形成一个执行栈

2、主线程之外，还存在一个‘任务队列’，只要异步任务有了运行结果，就在‘任务队列’之中放置一个事件

3、一旦‘执行栈’中的所有同步任务执行完毕，系统就会读取‘任务队列’，看看里面有哪些事件，那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行

4、主线程不断重复上面的第三步