你真的知道setTimeout是如何运行的吗?

首先大家看看如下代码,猜猜运行结果如何:

    var start = new Date;
    console.log(1);
    setTimeout(function(){
        console.log('从开始到现在时间过了:'+(new Date - start)+'毫秒');
        console.log(2);
    },1000);
    console.log(3);
    setTimeout(function(){
        console.log('从开始到现在时间过了:'+(new Date - start)+'毫秒');
        console.log(4);
    },2000);
    console.log(5);

结果是
1
3
5
(约过了1秒左右)从开始到现在时间过了:1015毫秒
2
(约过了2秒左右)从开始到现在时间过了:2016毫秒
4

您猜对了没?
这里通过setTimeout来延迟执行的函数都被推到最后才执行了;

原理如下

在现有浏览器环境中,Javascript执行引擎是单线程的,主线程的语句和方法,会阻塞定时任务的运行,在Javascript执行引擎之外,存在一个任务队列,当在代码中调用setTimeout()方法时,注册的延时方法会挂到浏览器内核其他模块处理,当延时方法到达触发条件,即到达设置的延时时间时,该模块再将要执行的方法添加至该模块的任务队列中。这一过程与执行引擎主线程独立,执行引擎在主线程方法执行完毕,到达空闲状态时,才会从该模块的任务队列中顺序提取任务来执行,这期间的时间,可能大于注册任务时设置的延时时间;浏览器在空闲状态下,会不断的尝试从模块的任务队列中提取任务,这称为事件循环模型


代码

代码描述


Javascript执行引擎的主线程运行的时候,产生堆(heap)和栈(stack)。程序中代码依次进入栈中等待执行,当调用setTimeout()方法时,浏览器内核相应模块开始延时方法的处理,当延时方法到达触发条件时,方法被添加到用于回调的任务队列,只要执行引擎栈中的代码执行完毕,主线程就会去读取任务队列,依次执行那些满足触发条件的回调函数。


如想详细了解 JavaScript运行机制 请点击这里→ JavaScript 运行机制详解

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值