在浏览器中,事件作为一个极为重要的机制,给予JavaScript响应用户操作与DOM变化的能力。在NodeJS中。异步事件驱动模型则是提高并发能力的基础。

一、程序怎样响应事件

程序响应外部的事件有两种方式:

1. 中断

操作系统处理键盘等硬件输入就是通过中断来进行的。这个方式的优点是即使没有多线程,我们也能够放心地运行我们的代码,CPU收到中断信号之后自己主动地转去运行对应的中断处理程序,处理完毕后会恢复原来的代码的运行环境继续运行。

这样的方式须要硬件的支持。一般来说都会被操作系统封装起来。

2. 轮询

循环检測是否有事件发生,假设有就去运行对应的处理程序。这在底层和上层的开发中都有应用。

轮询方式的一个缺点就是:假设在主线程的消息循环里进行耗时操作。程序就无法及时响应新的消息。

二、JavaScript中定时器功能的特点

不管是Node还是浏览器中,都有setTimeout和setInterval这两个定时器函数。而且其工作特点基本同样。

JavaScript中的定时器并不同于计算机底层的定时中断。

中断到来时,当前运行代码会被打断。转去运行定时中断处理函数。

而JavaScript的定时器到时,假设当前运行线程没有正在运行的代码。则运行对应的回调函数;假设当前有代码在运行中,JavaScript引擎既不会中断当前代码转去运行回调,也不会开新的线程运行回调,而是当前代码运行完成之后才去处理。

console.time("setTimoutLabel");	//标记时间開始
setTimeout(function() {
console.timeEnd("setTimoutLabel"); //标记时间结束
}, 100);
for (var i = 0; i < 100000; i++) { }

运行上面的代码。能够看到终于输出的时间并非100ms左右,而是数秒。

这说明在循环完毕之前,定时回调函数确实没有被运行。而是推迟到了循环结束。实际上在JavaScript代码运行中,所有的事件都无法得到处理,必须等到当前代码所有完毕,才干去处理新的事件。这就是为什么在浏览器中运行耗时JavaScript代码时,浏览器会失去响应。

三、定时器的工作原理

1. javascript引擎仅仅有一个线程,迫使异步事件仅仅能增加队列去等待运行。

2. 在运行异步代码的时候,假设定时器被正在运行的代码堵塞了,它将会进入队列的尾部去等待运行直到下一次可能运行的时间出现(可能超过设定的延时时间)。setTimeout 和setInterval 是有着本质差别的:setTimeout 这段代码会在每次回调函数运行之后至少须要延时“指定延迟毫秒值”再去执行(可能是很多其它,可是不会少)。可是setInterval会每隔“指定延迟毫秒值”就去尝试运行一次回调函数。无论上一个回调函数是不是还在运行。

JavaScript事件驱动机制&amp;定时器机制的更多相关文章

  1. JavaScript具有自动垃圾回收机制

    JavaScript具有自动垃圾回收机制 原理: 找出那些不再继续使用的变量,然后释放其占用的内存.   正常的生命周期:     局部变量指在函数执行的过程中存在.而在这个过程中,会为局部变量在栈或 ...

  2. javascript中的错误处理机制

    × 目录 [1]对象 [2]类型 [3]事件[4]throw[5]try[6]常见错误 前面的话 错误处理对于web应用程序开发至关重要,不能提前预测到可能发生的错误,不能提前采取恢复策略,可能导致较 ...

  3. JavaScript的作用域和提升机制

    JavaScript的作用域和提升机制 你知道下面的JavaScript代码执行时会输出什么吗? 1 2 3 4 5 6 7 8 var foo = 1; function bar() {     i ...

  4. JavaScript中的分号插入机制

    原文:JavaScript中的分号插入机制 仅在}之前.一个或多个换行之后和程序输入的结尾被插入 也就是说你只能在一行.一个代码块和一段程序结束的地方省略分号. 也就是说你可以写如下代码 functi ...

  5. 【JS】JavaScript引擎的内部执行机制

     近期在复习JavaScript,看到setTimeout函数时.想起曾经刚学时,在一本书上看过setTimeout()里的回调函数执行的间隔时间有昌不是后面设置的值.曾经没想太多.网上看了JS大 ...

  6. 从一道看似简单的面试题重新理解JS执行机制与定时器

     壹 ❀ 引 最近在看前端进阶的系列专栏,碰巧看到了几篇关于JS事件执行机制的面试文章,因为我在之前一篇 JS执行机制详解,定时器时间间隔的真正含义 博文中也有记录JS执行机制,所以正好用于作为测试自 ...

  7. JavaScript中的事件循环机制跟函数柯里化

    一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...

  8. JS线程机制与事件机制

    JS线程机制与事件机制 1.进程与线程 (1).定义: 进程:程序的一次执行,它占有一片独有的内存空间 CPU的基本调度单位,是程序执行的一个完整的流程 (2).进程与线程的关联 一个进程一般至少有一 ...

  9. cookie机制、session机制

    会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...

随机推荐

  1. LeetCode题解 || Longest Substring Without Repeating Characters (O(n)算法)问题

    problem: Given a string, find the length of the longest substring without repeating characters. For ...

  2. 为代码减负之&lt;三&gt;视图(SQL)

    在设计数据库时为了降低数据冗余.一般都会依照三范式去设计,但有时我们在查询时须要通过一字段获取跟这 个字段相关联的好几个字段.可是他们又分布在不同的表中,这时候假设依照正常途径走的话须要同一时候查询好 ...

  3. 24.qint64转QString 以及获取文件属性

    qint64转QString qint64 size = info.size(); //qint64 转QString QString size2 = tr("%1").arg(s ...

  4. CodeFirst模式,容易引发数据迁移问题(不建议使用)

    code first 模式 .模型类需要数据契约绑定[DataContract] .模型参数需要[DataMember]-----(可以序列化) .(同上)也可以在类的上面增加[Table(" ...

  5. 深度理解DOM事件(实例)

    前言 通过如下两个实例来理解DOM事件 实例1--点击别处关闭浮层 onclick与addEventListener的区别 实例2--点击后颜色一层一个层出现的漂亮的彩虹圈 1  实例1--点击别处关 ...

  6. [原创]c语言中const与指针的用法

    最近一直在准备笔试,补补大一大二欠下的课.复习c语言时碰见这么个题:   1 2 3 4 5 int a=248, b=4; int const c=21; const int *d=&a;  ...

  7. TortoiseSVN—Repo-browser

    TortoiseSVN—Repo-browser,打开你要比较的两个版本所在的地址,选择一个版本做为比较的基础(单击右键—选择mark for comparison),再选择另外一个版本(单击右键—选 ...

  8. javscript中变量的作用域和提升

    示例: var a = 1; function foo() {   if (!a) {     var a = 10;   }    alert(a); }; foo(); 上面这段代码在运行时会产生 ...

  9. day09-1 列表,元祖的内置方法

    目录 列表类型的内置方法 作用 定义方式 方法 优先掌握 需要掌握 储存一个值or多个值 有序or无序?(有序:有索引, 无序:无索引) 可变or不可变(可变:值变id不变,不可变:值变id也变) 元 ...

  10. vscode快捷键补充

    ctrl+enter 快速还到下行并插入一行 ctrl+shift+enter 快速换到上行并插入一行 ctrl+~ ctrl+1 快速在终端与代码区切换 ctrl+i 选中一行 ctrl + p: ...