美文网首页
第十三节 JavaScript 定时器 单线程

第十三节 JavaScript 定时器 单线程

作者: 心存美好 | 来源:发表于2021-11-22 20:00 被阅读0次

    一、定时器

    1. JS存在两种定时器

    setTimeout() 延迟定时器

    setInterval() 循环定时器(“间隔器”)

    定时器中的函数挂载在window对象,内部的this ----> window

    setTimeout(function(){
        console.log('wuwei')
    },1000);   // 一秒后打印wuwei
    
    setInterval(function(){
        console.log('wuwei')
    },1000);   // 每隔一秒就打印wuwei,如果不清楚或关闭页面,将会无限循环下去
    
    2. 清除定时器

    在每次使用定时器时,都必须清除定时器

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

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

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

    // 在开启定时器的同时定义一个变量接受定时器返回的id,用于清除定时器
    
    // 清除setTimeout,要在执行前清理
    var timer = setTimeout(function(){
        console.log('wuwei')
    },2000)
    clearTimerout(timer);
    
    // 清除setInterval
    var timer2 = setInterval(function(){
        console.log('wuwei')
    },2000)
    clearInterval(timer2) ;
    
    
    
    
    var id=setInterval(function() {
      console.log(123454);
    }, 1000);
    console.log(id);
    setTimeout(function(){
      clearInterval(id)
    },5000)      //执行5次后关闭
    
    3.关于定时器函数的参数

    定时器接受多个参数

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

    2. 第二个为定时器执行的毫秒数,可以不传,不会报错

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

      // 省略第二个参数会立即执行
      setTimeout(function(){
      console.log('无为')
      })

      // 第三个以后的参数是第一个参数函数执行时的实参
      setTimeout(function(a,b){
      console.log(a,b)
      },2000,10,20);

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

    4. 关于定时器的第一个参数

    定时器的第一个参数可以是多种形式

    4.1 匿名函数

    setTimeout(function(){
        console.log('无为')
    },2000)
    

    4.2 有名函数

    setTimeout(function haha(){
        console.log('无为')
    },2000)
    

    4.3 有名函数(把函数抽离出来的)

    function haha(){
        console.log('wuwei');
    }
    setTimeout(haha,2000)
    

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

    setTimeout('console.log("hahah")',2000)
    

    二.JS的单线程

    1. 单线程理解

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

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

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

    2. 线程阻塞

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

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

    处理js代码的JS引擎是单线程的,浏览器有三个常驻线程,JS(解析)引擎线程、界面的渲染线程(浏览器内核分渲染和JS引擎)处理前端页面,浏览器事件触发线程,还有一些执行完就终止的线程,比如HTTP请求线程

    在看一个例子:

    for(var i = 0; i< 5; i++){
        setTimeout(function(){
            console.log(i)
        },1000)
    }
    // 打印几
    
    3. 同步任务和异步任务

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

    所以JS的任务队列分成两种,同步任务,和异步任务,

    1. 同步任务:在JS主线程排队执行的任务
      => 形成执行栈
    2. 异步任务:不进入主线程进入”任务队列”的任务
      => 形成任务队列

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

    所以下面的程序定时器会后执行

    setTimeout(function(){
        console.log(1)
    },0)
    for(var i = 0; i< 10000;i++){
        console.log(2)
    }
    

    定时器会等待for循环执行完毕后在执行.

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

    因为js的单线程和他的用途用过,因为它是脚本语言,多线程将会面临复杂的同步问题,如果js有两个线程一个在添加节点,一个在删除节点,那到底以哪个为准

    为了利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但是子线程完 全受主线程控制,且不得操作DOM。所以,这个新标准并没有改变JavaScript单线程的本质。

    4. JS代码的执行顺序

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

    1. 所有同步任务都在主线程上执行,形成一个执行栈。
    2. 主线程之外,还存在一个"任务队列"。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。
    3. 一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
    4. 主线程不断重复上面的第三步。

    相关文章

      网友评论

          本文标题:第十三节 JavaScript 定时器 单线程

          本文链接:https://www.haomeiwen.com/subject/wjobtrtx.html