js的单线程引擎如何通过timeout实现异步

浏览器是基于一个事件循环的模型,在这里面,可以有多个任务队列,比如render是一个队列,响应用户输入是一个,script执行是一个。任务队列里放的是任务,同一个任务来源的任务肯定在同一个任务队列里。任务有优先级,鼠标或键盘响应事件优先级高,大概是其他任务的3倍。

任务的执行过程中可能产生:

spin:不影响Event Loop并延后执行

pause:停止Event Loop并延后执行

spin,如setTimeout的异步方式,就是spin方式,当执行到setTimeout时,此任务先暂停并保存,继续执行后续任务,当条件满足时,再将setTimeout的执行任务放回任务队列的后面,等待执行,假如前面有一个2s的任务,那原本是delay 1s的任务实际执行时会是在第3s的时候才执行。

pause,则是当在js中获取元素的offsetWidth等需要更新dom操作的动作时发生的。当执行到此任务时,将停止事件循环的工作,也就是先停止js引擎解析执行,跳到渲染引擎更新用户界面至当前状态,这期间,不处理后续任务,当前执行的脚本暂停,界面保持响应,但无法处理输入(事件循环停了),直到成功返回才继续执行任务。

function A(fun){   
 var temp = 100;  
 temp = temp * temp;   
 window.setTimeout(function(){ 
       fun(temp);
    },0);
 alert("a函数:"+temp);
}
function B(r)
{   
 alert("b函数"+r);
}
A(B);// 调用
时间: 2024-10-23 14:04:42

js的单线程引擎如何通过timeout实现异步的相关文章

js的单线程和异步

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

多进程浏览器、多线程页面渲染与js的单线程

线程与进程 说到单线程,就得从操作系统进程开始说起.在早期的操作系统中并没有线程的概念,进程是能拥有资源和独立运行的最小单位,也是程序执行的最小单位.任务调度采用的是时间片轮转的抢占式调度方式,而进程是任务调度的最小单位,每个进程有各自独立的一块内存,使得各个进程之间内存地址相互隔离.后来,随着计算机的发展,对CPU的要求越来越高,进程之间的切换开销较大,已经无法满足越来越复杂的程序的要求了.于是就发明了线程,线程是程序执行中一个单一的顺序控制流程,是程序执行流的最小单元.这里把线程比喻一个车间

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

jquery jtemplates.js模板渲染引擎的详细用法第一篇

jquery jtemplates.js模板渲染引擎的详细用法第一篇 Author:ching Date:2016-06-29 jTemplates是一个基于JQuery的模板引擎插件,功能强大,有了他你就再不用为使用JS绑定数据时发愁了.后端语言使用php,asp.net,jsp等都不是问题,使用模板渲染可以很大程度上提高程序性能,使用异步获取数据,不用整个页面都回发,好处当然不仅仅是这些. 下载jtemplates,官网的文档写得非常的详细 打开官网:http://jtemplates.tp

jquery jtemplates.js模板渲染引擎的详细用法第二篇

jquery jtemplates.js模板渲染引擎的详细用法第二篇 关于jtemplates.js的用法在第一篇中已经讲过了,这里就直接上代码,不同之处是绑定模板的方式,这里讲模板的数据专门写一个template.html的文件来展示 <span style="font-family:Microsoft YaHei;font-size:14px;"><!doctype html> <html lang="zh-CN"> <

jquery jtemplates.js模板渲染引擎的详细用法第三篇

jquery jtemplates.js模板渲染引擎的详细用法第三篇 <span style="font-family:Microsoft YaHei;font-size:14px;"><!doctype html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; chars

没有文件扩展&quot;.js&quot;的脚本引擎 解决办法

在命令行运行JScript脚本时,遇到如下的错误提示: “输入错误: 没有文件扩展“.js”的脚本引擎.” 这样的错误,原因是因为JS扩展名的文件被其他软件关联了,需要取消关联. 如系统中安装了ULTRAEDIT或者E钻加密软件等,就需要去掉关联: 或者如下解决方法: 在运行中输入“regedit”进入注册表, 只需要把[HKEY_CLASSES_ROOT\.js] 项下的那个默认值改成 "JSFile" 就可以正常运行JS 文件了.

【panda.js】panda.js html5游戏引擎入门介绍

一.官网 http://www.pandajs.net/ 二.主要特性 使用高速图形渲染 pixi.js 使用粒子引擎(Particle engine)制作特效 缓动(Tweening) 物理引擎(Physics engine) 定时器(Timer) 移动端支持 声效管理 模块化(Modules)的方式组织你的源代码 三.安装 请先安装node.js,再通过npm安装pandatool: $ npm install -g pandatool 四.新建并构建项目 $ panda create pa

template.js 数据渲染引擎

template.js 数据渲染引擎 template.js是一款JavaScript模板引擎,用来渲染页面的. 原理:提前将Html代码放进编写模板 <script id="tpl" type="text/html"></script> 中,当需要渲染页面时,在js里这样调用: var tpl = document.getElementById('tpl').innerHTML; template(tpl, data}); template