JavaScript多线程详解_javascript技巧

虽然有越来越多的网站在应用AJAX技术进行开发,但是构建一个复杂的AJAX应用仍然是一个难题。

造成这些困难的主要原因是什么呢?是与服务器的异步通信问题?还是GUI程序设计问题呢?通常这两项工作都是由桌面程序来完成的,那究竟为何开发一个可以实现同样功能的AJAX应用就这么困难呢?

大家都知道javascript是单线程执行的,但是又可以通过setTimeout或者setInterval定时执行一个方法,通过Ajax可以在向服务器端发送请求没有收到回应可以继续执行主逻辑。这些是如何做到的呢,下面就来探讨下。

先看如下一段代码:

<html>
  <body>
  <script type="text/javascript">
    function printHello()
    {
      console.time("hello");
    }
    function printHello1()
    {
      console.timeEnd("hello");
    }
    setTimeout(printHello,1000);
    setTimeout(printHello1,5000);
    function wait(time)
    {
      var now = Date.now();
      while(Date.now() - now < time)
      {
      }
    }
    wait(5000);
  </script>
  </body>
</html>

以上代码得执行结果为

hello: 0.124ms

从代码可以看出,printHello 与printHello1几乎是同时执行的。如果对于多线程模型,应该执行间隔是4000ms。

以上的原因是setTimeout只是将事件到时间点压入队列,而不是立即执行。具体何时执行还要看浏览器的空闲程度。

其实虽然javascript是单线程的,但是浏览器是多线程的,典型的浏览器有如下线程:

javascript引擎线程
界面渲染线程
浏览器事件触发线程
Http请求线程

javascript单线程指的是javascript引擎线程单线程处理它的事件队列,而浏览器是事件驱动的,很多事件都是异步的,比如鼠标点击事件,setTimeout,Ajax回调事件,当这些事件发生时,浏览器会将这些事件放入执行队列,待浏览器空闲时再执行。

另外,值得一提的是,ajax调用确实是异步的,浏览器会启动一个新线程来想服务端发送请求,如果设置了回调事件,会根据服务端返回状态将回调事件放入事件队列。

以上所述是本人对JavaScript多线程的理解,个人理解能力有限,还望各位大侠提成宝贵意见,共同学习。希望以上介绍对大家有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript多线程
javascript 多线程、javascript实现多线程、javascript有多线程吗、java多线程详解、多线程详解,以便于您获取更多的相关知识。

时间: 2024-09-27 20:10:42

JavaScript多线程详解_javascript技巧的相关文章

JS高级调试技巧:捕获和分析 JavaScript Error详解_javascript技巧

反正只要 JavaScript 出错后刷新不复现,那用户就可以通过刷新解决问题,浏览器不会崩溃,当没有发生过好了.这种假设在 Single Page App 流行之前还是成立的.现在的 Single Page App 运行一段时间后状态复杂无比,用户可能进行了若干输入操作才来到这里的,说刷新就刷新啊?之前的操作岂不要完全重做?所以我们还是有必要捕获和分析这些异常信息的,然后我们就可以修改代码避免影响用户体验. 捕获异常的方式 我们自己写的 throw new Error() 想要捕获当然可以捕获

在Node.js中使用Javascript Generators详解_javascript技巧

Generators是Javascript的一种协同程序( coroutine 简称:协程)风格,是指那些可以在执行时暂停然后又恢复的函数,该函数是在functi配以星号符号形式如function* ,函数内有些特征关键词如yield 和yield*. function* generatorFn () { console.log('look ma I was suspended') } var generator = generatorFn() // [1] setTimeout(functio

JavaScript构造函数详解_javascript技巧

构造函数就是初始化一个实例对象,对象的prototype属性是继承一个实例对象.   构造函数注意事项: 1.默认函数首字母大写 2.构造函数并没有显示返回任何东西.new 操作符会自动创建给定的类型并返回他们,当调用构造函数时,new会自动创建this对象,且类型就是构造函数类型. 3.也可以在构造函数中显示调用return.如果返回的值是一个对象,它会代替新创建的对象实例返回.如果返回的值是一个原始类型,它会被忽略,新创建的实例会被返回.     function Person( name)

javascript 闭包详解_javascript技巧

看了一下网上闭包的概念及文章,对于这个问题,自己做一个梳理吧. 问:闭包是什么? 答:闭包是指在 JavaScript 中,内部函数总是可以访问其所在的外部函数中声明的参数和变量,即使在其外部函数被返回(寿命终结)了之后. 这个是我自身第一次碰到闭包的问题 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>闭包循环问题</title> <

javascript控制台详解_javascript技巧

一.显示信息的命令 console.log(); //控制台输入 网页中不会输出 console.info(); //一般信息 console.debug(); //除错信息 console.warn(); //警告提示 console.error(); //错误提示 "console.log();" 可以用来取代 "alert();" 或 "document.write();" 比如,在网页中写入 "console.log("

JavaScript 异常处理 详解_javascript技巧

前端工程师都知道 JavaScript 有基本的异常处理能力.我们可以 throw new Error(),浏览器也会在我们调用 API 出错时抛出异常.但估计绝大多数前端工程师都没考虑过收集这些异常信息 反正只要 JavaScript 出错后刷新不复现,那用户就可以通过刷新解决问题,浏览器不会崩溃,当没有发生过好了.这种假设在 Single Page App 流行之前还是成立的.现在的 Single Page App 运行一段时间后状态复杂无比,用户可能进行了若干输入操作才来到这里的,说刷新就

JavaScript 数组详解_javascript技巧

在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活.强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改. 创建数组 在JavaScript多种方式创建数组 构造函数 1.无参构造函数,创建一空数组 复制代码 代码如下: var a1=new

JavaScript函数详解_javascript技巧

1.函数定义  函数包含一组语句,它们是javascript的基础模块单元,用于代码复用.信息隐藏和组合调用.函数用于指定对象的行为 2.函数的四种调用模式及this的初始化 第一种:方法调用模式     以下事例证明通过方法调用模式调用时,this绑定到拥有该方法的对象.如: 复制代码 代码如下: var person = {     name: "defaultName",     setName : function(name){         this.name = name

JavaScript触发器详解_javascript技巧

一个网站的前端由三个层构成.由XHTML构建的结构层,它包括结构化和有语义的标签,以及网站的内容.可以在这一层之上增加一个表现层(CSS)和一个行为层(JavaScript),它们使网站看起来更漂亮,对用户更友好.这三层之间应该保持严格的分离.打个比方来说,应该具有这样的可能性:可以重写整个表现层而完全不需要触动到结构层和行为层.  除了这种严格的分离,表现层和行为层都需要得到来自结构层的指令.它们必须知道在哪里应用样式,在什么时候初始化行为--换句话说:它们需要触发器. CSS的触发器大家都很