.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有趣的单线程的更多相关文章

  1. 探秘JS的异步单线程

    对于通常的developer(特别是那些具备并行计算/多线程背景知识的developer)来讲,js的异步处理着实称得上诡异.而这个诡异从结果上讲,是由js的“单线程”这个特性所导致的. 我曾尝试用“ ...

  2. js为什么是单线程的?10分钟了解js引擎的执行机制

    深入理解JS引擎的执行机制 1.JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4.说说setT ...

  3. JS(异步与单线程)

    JS(异步与单线程) 题目1.同步和异步的区别是什么,试举例(例子见知识点) 区别: 1.同步会阻塞代码执行,而异步不会 2.alert 是同步,setTimeout 是异步 题目2.关于 setTi ...

  4. JS定时器和单线程异步特性

    首先要说的是,定时器相关的方法都是属于BOM方法,而定时器呢,它是用于在设定的时间执行一段代码,或者在给定的时间间隔内重复该代码.具体函数: setTimeout(callback, delay);/ ...

  5. JS为什么是单线程的?

    JavaScript语言最大的特点就是单线程.它是浏览器的脚本语言.在同一时间只能做一件事.用于操作DOM.如果JS是多线程的,当我在给一个DOM添加内容时,又删除了这个DOM,那么JS该怎么做. 关 ...

  6. 使用PHP顶替JS有趣DOM

    較简单,我须要把一个导航页的数据整理好写入数据库.一个比較直观的方法是对html文件进行分析.通用的方法是用php的正則表達式来匹配.可是这样做开发和维护都非常困难,代码可读性非常差. 导航页的数据都 ...

  7. JS 有趣的JS

    一. var arr = []; for (var i = 0; i < 3; i++) { arr[i] = function() { console.log(i+'__') // 3 3 3 ...

  8. JS 有趣的eval优化输入验证

    //eval就是计算字符串[可以放任何js代码]里的值 . var str1='12+3'; eval(str1); . var str2='[1,2,3]'; eval(str2[]); .eval ...

  9. [jQuery]入口函数(一) jquery.min.js 一定要单线程下载,复制粘贴容易入坑

    jQuery入口函数 等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完毕 $(function () { // 此处是页面DOM加载完成的入口 }); $(document).rea ...

随机推荐

  1. Android设计 - 图标设计概述(Iconography)

    2014-10-30 张云飞VIR 翻译自:https://developer.android.com/design/style/iconography.html Iconography 图标设计概述 ...

  2. JavaScript cookie操作实现点赞功能

    JavaScript cookie操作实现点赞功能 参考实现原理,但是代码不够简洁,简洁代码参考:js操作cookie 实现一个点赞功能十分简单,主要问题在于不能重复点赞.  若是一个有用户的网站,可 ...

  3. 解决:According to TLD or attribute directive in tag file, attribute value does not accept any express。

    http://blog.csdn.net/lzblog/article/details/22076893 ——————————————————————————————————————————————— ...

  4. css3学习系列之初识 transform (一)

    一.transform是哈? 从字面意思来看 transform的含义是:改变,使…变形:转换,对 没错 就是变形 变形当有 放大缩小 东倒 西歪,刚好css3中 transform 也出这个 放几个 ...

  5. 【转】两款 Web 前端性能测试工具

    前段时间接手了一个 web 前端性能优化的任务,一时间不知道从什么地方入手,查了不少资料,发现其实还是蛮简单的,简单来说说. 一.前端性能测试是什么? 前端性能测试对象主要包括: HTML.CSS.J ...

  6. Recommended Practices for WPF Custom Control Developers

    I have always found that there isn’t enough documentation about Custom Control development in WPF. M ...

  7. 定义与声明、头文件与extern总结

     用#include可以包含其他头文件中变量.函数的声明,为什么还要extern关键字? 如果我想引用一个全局变量或函数a,我只要直接在源文件中包含#include<xxx.h> (xxx ...

  8. 自然语言交流系统 phxnet团队 创新实训 个人博客 (十一)

    名思义是 给游戏场景 添加一个 天空背景 让游戏更加精美,更具有魅力 添加天空盒 有两种方式  1 : 在当前相机上添加skybox   2 : 在当前场景上添加skybox 上面的两种方式的结果是一 ...

  9. ubuntu lapack安装与使用

    https://blog.csdn.net/zouyu1746430162/article/details/53374693 https://blog.csdn.net/mlnotes/article ...

  10. SSH-简单登陆业务详解,从环境部署到代码编写

    一直都是半解半知的情况下动手去实现某些功能,但是竟然也可以成功, 而我发现你花2小时听视频看所谓的理论,不如花2小时直接做个功能出来, 更加深了对此框架的理解,中间遇到问题后,可以上网再查详细的知识点 ...