JS有趣的单线程

.JS的执行特点

源于单线程的特性, JS在一段时间内只能执行一部分代码, 那么, 当有多块代码需要执行时, 就需要排队等候了.

二.单线程与异步事件

(1) 什么是异步事件?

异步事件是像鼠标点击、计时器释放、XMLHttpRequest请求完成这样的动作, 由于我们不知道它何时执行, 所以, 可以认为它是不同步的(这些说明只能作为帮助理解的参考, O(∩_∩)O).

(2) 异步事件是否会受到单线程的影响?

答案是肯定的: 异步事件也必须排队等候(即异步事件对应的JS回调函数, 也必须排队等候执行, 如何排队则因浏览器而异).

我们经常借助setTimeout来"改善恶劣的等候情况", 这里就以一个setTimeout的例子, 来展示一下单线程独特的魅力:

// code

<script type="text/javascript">

function ShowCurrentTime(){
var date = new Date();
var now = "";
now = date.getFullYear()+"-";
now = now + (date.getMonth()+1)+"-";
now = now + date.getDate()+" ";
now = now + date.getHours()+":";
now = now + date.getMinutes()+":";
now = now + date.getSeconds();
return now;
}

function test(){
console.log(‘a_time:‘ + ShowCurrentTime());

//访问该连接会延迟12秒
$.post(‘http://www.xxxxx.com/oilcard/index‘,‘‘,function(){
console.log(‘b_time:‘ + ShowCurrentTime());
},‘html‘);
console.log(‘c_time:‘ + ShowCurrentTime());
}

test();
setInterval("console.log(‘d_time:‘ + ShowCurrentTime())", 1000 );

</script>

// 执行结果

执行先后:a,c,d,b ;

// 对执行结果的分析

从结果可以很明显的看到, 延时函数是在add函数执行完之后才执行的, 为什么会这样呢? 这是因为,

timeout只延时了15ms, 而add函数执行所需的时间远大于15ms, 也就是说, 在add函数还未执行完毕

时, 计时器就已经释放了, 但是由于单线程的原因, 延时函数不会立即执行(因为当前时间段内, add函数还在执行), 而此时, 浏览器会将延时函数编入队列, 以便能在下一个可执行的时间段内得到执行.(过程如下图)

再来个例子:

去掉上面的延迟12秒响应;

结果:

执行先后是: acbd;

你看,就代码块来说,在同一个作用域里的代码优先执行。
后面才执行的D;

同样类似的例子在php中,无法重现,绝对的按语言优先级来。

JS有趣的单线程,布布扣,bubuko.com

时间: 2024-10-17 17:00:34

JS有趣的单线程的相关文章

js异步和单线程

1.同步和异步的区别 a>同步会阻塞代码执行,异步不会 b>alert()是同步  setTimeout()是异步 2.关于setTimeout(); console.log(1); setTimeout(function() { console.log(2);}, 0); console.log(3); setTimeout(function() { console.log(4);}, 0); console.log(5); // 13524 3.前端执行异步的场景: a>定时任务 b

使用PHP顶替JS有趣DOM

較简单,我须要把一个导航页的数据整理好写入数据库.一个比較直观的方法是对html文件进行分析.通用的方法是用php的正則表達式来匹配.可是这样做开发和维护都非常困难,代码可读性非常差. 导航页的数据都是规则的排列在DOM树其中的,用JS能够用几个循环轻松的对其进行操作,并且JS须要依赖浏览器,操作数据库非常困难.事实上PHP就有现成的类库对DOM树种的节点进行增删改查操作,在此做一些笔记. 这里涉及到2个类 DOMDocument 和 DOMXPath. 事实上思路比較明白,就是通过DOMDoc

单线程的JS引擎

先来思考一个问题,JS 是单线程的么?为什么单线程的JavaScript却能让AJAX异步发送和回调请求,还有setTimeout也看起来像是多线程的?还有non-blocking IO, event loop等概念. 目录: JS单线程 浏览器多线程 setTimeout(func, 0) 的应用场景 setTimeout与setInterval 参考资料 TODO: 接下来,梳理JS的并发模型与 Event Loop https://developer.mozilla.org/zh-CN/d

浅谈Node.js单线程模型

Node.js采用 事件驱动 和 异步I/O 的方式,实现了一个单线程.高并发的运行时环境,而单线程就意味着同一时间只能做一件事,那么Node.js如何利用单线程来实现高并发和异步I/O?本文将围绕这个问题来探讨Node.js的单线程模型: 1.高并发 一般来说,高并发的解决方案就是多线程模型,服务器为每个客户端请求分配一个线程,使用同步I/O,系统通过线程切换来弥补同步I/O调用的时间开销,比如Apache就是这种策略,由于I/O一般都是耗时操作,因此这种策略很难实现高性能,但非常简单,可以实

js单线程

众所周知,JavaScript是以单线程的方式运行的. 一.为什么js是单线程? 这与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.若以多线程的方式操作这些DOM,则可能出现操作的冲突.假设有两个线程同时操作一个DOM元素,线程1要求浏览器删除DOM,而线程2却要求修改DOM样式,这时浏览器就无法决定采用哪个线程的操作.当然,我们可以为浏览器引入"锁"的机制来解决这些冲突,但这会大大提高复杂性,所以 JavaScript 从诞生开始就选择

【转】浅谈Node.js单线程模型

Node.js采用 事件驱动 和 异步I/O 的方式,实现了一个单线程.高并发的运行时环境,而单线程就意味着同一时间只能做一件事,那么Node.js如何利用单线程来实现高并发和异步I/O?本文将围绕这个问题来探讨Node.js的单线程模型: 1.高并发 一般来说,高并发的解决方案就是多线程模型,服务器为每个客户端请求分配一个线程,使用同步I/O,系统通过线程切换来弥补同步I/O调用的时间开销,比如Apache就是这种策略,由于I/O一般都是耗时操作,因此这种策略很难实现高性能,但非常简单,可以实

js的单线程和异步

js的单线程和异步 前言 说到js的单线程(single threaded)和异步(asynchronous),很多同学不禁会想,这不是自相矛盾么?其实,单线程和异步确实不能同时成为一个语言的特性.js选择了成为单线程的语言,所以它本身不可能是异步的,但js的宿主环境(比如浏览器,Node)是多线程的,宿主环境通过某种方式(事件驱动,下文会讲)使得js具备了异步的属性.往下看,你会发现js的机制是多么的简单高效! 说说浏览器 js是单线程语言,浏览器只分配给js一个主线程,用来执行任务(函数),

从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理(转)

前言 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正. ----超长文+多图预警,需要花费不少时间.---- 如果看完本文后,还对进程线程傻傻分不清,不清楚浏览器多进程.浏览器内核多线程.JS单线程.JS运行机制的区别.那么请回复我,一定是我写的还不够清晰,我来改... ----正文开始---- 最近发现有不少介绍JS单线程运行机制的文章,但是发现很多都仅仅是介绍某一部分的知识,而且各个地方的说法还不统一,容易造成困惑. 因此准备梳理这块知识点,结合已有的认知,基于网上的大量参

JS高阶---为什么说JS是单线程执行的???

大纲: [主体] (1)如何证明JS运行是单线程的? 上述代码执行顺序结果为:fn()→timeout 1111→timeout 2222 接下来对上述代码做下修改 执行结果如右图所示 接下来点击确认,关闭弹框,再往后1s执行timeoout 1111,再过1s执行timeout 2222 从这里可以看出,alert暂停了计时,点击确定后才会恢复程序执行和计时 最后总结如下 (2)为什么JS是单线程模式? . 原文地址:https://www.cnblogs.com/jianxian/p/119