• JavaScript 的异步和单线程


    问题

    Q:下面的代码是否能满足sleep效果?

    var t = true;
    setTimeout(function(){ t = false; }, 1000);
    while(t){ }
    alert('end');
    

    一开始我认为setTimeout是异步操作,一定会放在一个单线程里工作,并不会受主线程影响;事实是settimeout函数并无法执行,浏览器因为while死循环假死,也就是说setTimeout是没有机会执行的。之后搜相关资料发现js引擎是单线程的。

    为什么设计为单线程?

    JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊。
    JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?
    所以,为了避免复杂性,从一诞生,JavaScript就是单线程,这已经成了这门语言的核心特征,将来也不会改变。
    为了利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。所以,这个新标准并没有改变JavaScript单线程的本质。
    摘自 http://www.ruanyifeng.com/blog/2014/10/event-loop.html

    单线程如何异步,如何并发?

    我们知道,在一段程序代码中发起一个调用并等待直到调用返回结果再执行接下来的代码,这个调用对于这段程序来说是同步的;而发起一个调用后不用等待调用结果而直接执行后面的代码,这个调用对于这段程序来说就是异步的。

    异步意味着在主逻辑中被异步调用的代码和主逻辑继续执行的代码会同时执行,这其实是实现了并发。回想一下我们在 Java 或者其它多线程语言中是如何实现异步的,一般来说,要创建一个异步任务,我们通常会创建一个线程然后在线程中执行该任务,这个任务和创建它的线程就可以并发执行了。但 Javascript 单线程的特性显然和这异步、并发是有冲突的,那么为什么说 Javascript 支持异步,支持并发呢?

    其实理解起来也很简单,Javascript 本身并不是异步的,而 Javascript 程序是异步的。具体来说就是,Javascript 编写的代码自身运行于单线程中,当遇到 IO 调用,就把它丢给运行时环境处理,自身继续执行后面的代码,当 IO 调用有了结果,会将结果及回调放在一个队列里,Javascript 线程会在合适的时机将回调函数取出并执行。

    Javascript 程序的异步由其运行时环境提供,通过event loop实现异步编程,并提供并发支持。

    实现异步编程可以有很多种方式(编程模型),想了解更多可以先看看这篇文章。

    摘自 http://cnodejs.org/topic/579e341885dba6b12ac58583

    伪sleep效果

    stackoverflow 有给出解决方案的:

    function sleep (time) {
        return new Promise((resolve) => setTimeout(resolve, time));
    }
    
    // Usage!
    sleep(1000).then(() => {
        // Do something after the sleep!
        alert('hello')
    })
    

    对于日常使用,使用settimeout一般都能满足。

  • 相关阅读:
    Intersection Observer 观察元素何时进入或退出浏览器的视口
    JS防抖函数、节流函数工具类封装
    页面刷新时,如何保持原有vuex中的state信息
    vue具名插槽、作用域插槽的新写法
    vue-cli3+工具中,配置路径别名(vue.config.js)
    基于Vue-SSR优化方案归纳总结
    React组件设计:重新认识受控与非受控组件
    如何用 JavaScript 实现一个数组惰性求值库
    原生 js 中应该禁止出现的写法,以提高代码效率和安全性
    Javascript 实践中的命令模式
  • 原文地址:https://www.cnblogs.com/rysinal/p/5834429.html
Copyright © 2020-2023  润新知