我们知道,js是单线程执行的(单线程j就是说在程序执行时,所走的程序路径按照连续顺序排下来,前面的必须处理好,后面的才会执行)。所以其实setTimeout和setInterval所谓的“异步调用”事实上是通过将代码段插入到代码的执行队列中实现的。
而如何计算插入的时间点呢?自然是要用到我们所说的timer,也就是计时器。当执行setTimeout和setInterval的时候,timer会根据你设定的时间“准确”地找到代码的插入点。当队列“正常”地执行到插入点时,就触发timer callback,也就是我们设定的回调函数

注意还有一种情况

刚刚已经知道,事实上setTimeout和setInterval只是简简单单地通过插入代码到代码队列来实现代码的延迟执行(或者说异步执行)。但是事实上所谓的异步只是一个假象——它同样运行在一个线程上! 始终是单线程!
那么问题就来了,要是在代码插入点前的代码执行时间超过了传入setTimeout或setInterval的设定时间会怎样呢?让我们来看看这段代码:

function fn() {
setTimeout(function(){alert('can you see me?');},1000);
while(true) {}
}

执行结果alert永远不会出现。

因为,while这段代码没有执行完(如图,浏览器一直在解析while的代码),所以插入在后面的代码便永远不会执行。
综上所述,其实JS终归是单线程产物。无论如何“异步”都不可能突破单线程这个障碍。所以许多的“异步调用”(包括Ajax)事实上也只是“伪异步”而已。

再看下面一段代码:

function run(){
// 其他代码
setTimeout(function(){
run();
}, 10000);
}
run();

以上面的代码来说, 虽然设置的是10s执行一次, 但是实际时间却是需要// 其他代码的执行时间来确定
即setTimeout的间隔时间是, // 其他代码执行时间 + 10s

setInterval(function(){
run();
}, 10000);

而setInterval, 不会有上面的问题, 但是如果run()的执行时间, 操作大于10s, 那么甚至可能跳过run()任务

setTimeout和setInterval和单线程的更多相关文章

  1. setTimeout和setInterval定时器使用详解测试

    var len=4; while(len--){ var time=setTimeout(function(){ console.log(len); },0); console.log(time); ...

  2. setTimeout,setInterval原理

    function a() { setTimeout(function(){alert(1)},0); alert(2); } a(); 和其他的编程语言一样,Javascript中的函数调用也是通过堆 ...

  3. setTimeout和setInterval的注意事项

    精准问题 setTimeout的问题在于它并不是精准的,例如使用setTimeout设定一个任务在10ms后执行,但是在9ms后,有一个任务占用了5ms的cpu时间片,再次轮到定时器执行时,时间已经过 ...

  4. setTimeout和setInterval的区别以及如何写出效率高的倒计时

    1.setTimeout和setInterval都属于js中的定时器,可以规定延迟时间再执行某个操作,不同的是setTimeout在规定时间后执行完某个操作就停止了,而setInterval则可以一直 ...

  5. setTimeout()与setInterval()

    一.setTimeout与setInterval的用法(http://www.css88.com/archives/5804) setTimeout是超时调用,javascript是一个单线程的解析器 ...

  6. 你真的了解setTimeout和setInterval吗?

    博客园的代码排版真难用,编辑时候是好的,一保存就是乱了——本文也同时发表在我另一独立博客上 你真的了解setTimeout和setInterval吗?,可以移步至这里吧 setTimeout和setI ...

  7. JavaScript的setTimeout和setInterval的深入理解

    发表过一片博客<跟着我用JavaScript写计时器>,比较基础.....有网友说应该写一下setTimeout的原理和机制,嗯,今天就来写一下吧: 直奔主题:setTimeout和set ...

  8. 关于js中的setTimeout和setInterval

    http://ejohn.org/blog/how-javascript-timers-work 这是John的一篇博文说到setTimeout和setInterval的区别,在看js高效图形编程的时 ...

  9. js:setTimeout 与 setInterval 比较

    在javascript中有两个非常有用的函数:setTimeout 和setInterval ,都是定时器:但是两者存在着一些区别: 1. setTimeout函数 用法:setTimeout(fn, ...

随机推荐

  1. 开源纯C#工控网关+组态软件(五)从网关到人机界面

    一.   引子 之前都在讲网关,不少网友关注如何实现界面.想了解下位机变量变化,是怎样一步步触发人机界面动画的. 这个步步触发,实质上是变量组(Group)的批量数据变化(DataChange)事件, ...

  2. Red and Black

    Problem Description There is a rectangular room, covered with square tiles. Each tile is colored eit ...

  3. 第十一章 多GPU系统的CUDA C

    本章介绍了 显存和零拷贝内存的拷贝与计算对比 #include <stdio.h> #include "cuda_runtime.h" #include "d ...

  4. vue.js项目安装

    Vue.js 安装 NPM 方法安装vue.js项目 npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm npm install np ...

  5. 双11Java程序员书单推荐

    Java <Java核心技术卷I> <Java核心技术卷II> <Java编程思想> <Java并发编程实战> <Effective Java&g ...

  6. T-SQL 删除重复数据SQL

    WITH cte AS (   SELECT roleid,permissionid,      row_number() OVER(PARTITION BY roleid,permissionid ...

  7. 使用 gulp-file-include 构建前端静态页面

    前言 虽然现在单页面很流行,但是在 PC 端多页面还是常态,所以构建静态页面的工具还有用武之地.最近也看到了一些询问如何 include HTML 文件的问题. 很多时候我们在写静态页面的时候也希望能 ...

  8. python3 多线程获取数据实例

    import requestsimport jsonfrom retrying import retryfrom lxml import etreefrom queue import Queueimp ...

  9. H5定位

    百度地图javaScript API 一.在html文件中引入 <script src="http://api.map.baidu.com/api?ak=Uk9tDddYkrQImXw ...

  10. ubuntu server小技巧(不定期更新)

    0.常用工具apt安装包名 # ssh服务器工具 apt-get install openssh-server # RabbitMQapt-get install rabbitmq-server # ...