需要知道的那些事:

1.JS是单线程的(为什么?因为能提高效率。作为浏览器脚本语言,js的主要用途是与用户互动,操作DOM。而这也就决定它只能为单线程,否则会带来很复杂的同步问题),也就是说无法同时执行好几段代码,都是从上往下一句一句的执行,前面的代码要先于后面的代码一步被执行。如:

1 var a=12;
2 var b=15;//js在运行的时候,先执行把12赋值给a的操作,再执行把15赋值给b的操作

2.同步VS异步

同步:在同一时间,你只能做一件事情,即使这件事情会花费很长时间,但依旧需要你坚守在那里直到事情处理完毕;

异步:你在做一件事情时,因为这件事情会花费很长时间,在这等待过程中你可以先去处理其他事情,等这件事轮到你的时候再过来处理她即可。

差别:在于这条流水线上各个流程的执行顺序不同。

setTimeOut(定时器)VSsetTimeInterval(间隔定时器)

在js当中最基础的异步操作就是setTimeOut()以及setTimeInterval()了。

1.setTimeOut()方法用于在指定的毫秒数后执行某些操作;

 //3秒后弹出“Hello”
var myVar; function myFunction() {
myVar = setTimeout(alertFunc, 3000);
} function alertFunc() {
alert("Hello!");
}

2.API:

 var id = setTimeout(fn,timer);
//fn是执行函数
//timer间隔时间
//返回一个id值,在fn未触发之前,可以通过clearTimeout(id)清除,从而不执行fn
clearTimeout(id);

3.使用clearTimeOut()方法来阻止函数的执行;

4.返回一个 ID(数字),可以将这个ID传递给 clearTimeout() 来取消执行。


1.setInterval描述的是每隔多少时间执行某操作;

2.setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数;

3.API:

        var id = setInterval(fn,timer);
//fn是要执行的函数,
//timer是间隔时间
//返回一个id,用于将来某个时间用clearInterval清除间隔定时器
clearInterval(id);

区别与联系:

1.首先从概念上来说明,setTimeout多少时间之后执行某操作,只执行一次,而setInterval每隔多少时间之后执行某操作,如果不用clearInterval清除的话,将会一直执行下去;

2.两个方法都返回一个id值,用于清除定时器,分别是clearTimeout和clearInterval;

3.再次从性能上来说,setTimeout的性能是要优于setInterval的;

4.setTimeout和setInterval都不能保证到了时间点一定会执行,如:setTimeout(fn,5000),并不能保证5s之后一定能执行fn。这得取决于当前js线程队列里面还有没有其他待处理队列,如果刚好没有的话,那么就能刚好执行,如果当前线程里面已经有了其它待处理队列正在执行,那么需要排队,等到javascript线程空闲的时候才会执行定时器;

5.setTimeout是等待循环的操作执行完成之后,才继续在间隔时间之后再把循环操作添加到javascript的线程里面,而setInterval是不等待的,它从来不管放在线程里面循环操作有没有执行完成,反正到点就会把循环操作添加到javascript线程队列里面;

6.能用setInterval实现的操作,一定能用setTimeout来实现。

任务队列:

1.是一个事件的队列或者消息的队列。

2.所有任务都是在主线程上执行,形成一个执行栈(execution context stack);

3.执行完js主线程的代码才会去看浏览器任务队列中的事件,再执行js代码中该事件对应的代码;

4.任务队列里放的是ajax这类的任务,是交给浏览器发起HTTP请求去执行的,当有了返回结果就会在任务队列中增加一个事件表示该ajax请求已经返回了结果,任务队列里的任务和js主线程是同时执行的。 不影响js是单线程的这个结论,只能说浏览器还会提供接口来供js

实现异步操作;

5.一旦执行栈中所有同步任务执行完毕,系统会自动读取“任务队列”中的看看有什么事件,那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行;

6.主线程不断重复上面的第5步(只要主线程空了,就会读取任务队列,这个过程会不断重复,这也就是js的运行机制)。

js同步 异步 运行机制的更多相关文章

  1. 【译】深入理解python3.4中Asyncio库与Node.js的异步IO机制

    转载自http://xidui.github.io/2015/10/29/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3python3-4-Asyncio%E5%BA%93% ...

  2. JavaScript的异步运行机制

    ----异步运行机制如下: 1.左右同步任务都在主线程上执行,形成一个执行栈 2.主线程值外,还存在一个任务队列,只要异步任务有了运行结果,就在任务队列中放置一个事件 3.一旦执行栈中的所有同步任务执 ...

  3. js 同步 异步 宏任务 微任务 文章分享

    分享一篇 写的很好的 宏任务 微任务  同步异步的文章 文章原地址: https://juejin.im/post/59e85eebf265da430d571f89 这一次,彻底弄懂 JavaScri ...

  4. Node.js和PHP运行机制对比

    为什么要用node.js它又有什么优势呢?一个新的技术被大家喜爱那么它就必然有它的优势,那么下面我们就来简单把它和php做一个对比 1 . Node.js 他用的是JavaScript引擎,那么注定它 ...

  5. js同步-异步-回调

    出处:https://blog.csdn.net/u010297791/article/details/71158212(1)上面主要讲了同步和回调执行顺序的问题,接着我就举一个包含同步.异步.回调的 ...

  6. 十四、JS同步异步知识点,重点(Node.js-fs模块补充篇)

    (本片文章如果你能耐着性子看我,保证会对同步和异步有一个非常深刻的理解) JavaScript是单线程执行,所谓的单线程呢就是指如果有多个任务就必须去排队,前面任务执行完成后,后面任务再执行.因为Ja ...

  7. 【java回调】同步/异步回调机制的原理和使用方法

    回调(callback)在我们做工程过程中经常会使用到,今天想整理一下回调的原理和使用方法. 回调的原理可以简单理解为:A发送消息给B,B处理完后告诉A处理结果.再简单点就是A调用B,B调用A. 那么 ...

  8. JS 冷知识,运行机制

    数组取最小.最大值 var a=[1,2,3,5]; alert(Math.max.apply(null, a));//最大值 alert(Math.min.apply(null, a));//最小值 ...

  9. 浅析JS异步执行机制

    前言 JS异步执行机制具有非常重要的地位,尤其体现在回调函数和事件等方面.本文将针对JS异步执行机制进行一个简单的分析. 从一份代码讲起 下面是两个经典的JS定时执行函数,这两个函数的区别相信对JS有 ...

随机推荐

  1. Python之cv2

    1.读取图片 import cv2 img = cv2.imread('./test.jpg') 读取出来的图片是numpy.ndarray格式,值是0-255, img的形状是 (图片高度,图片宽度 ...

  2. Pandas 的轴向连接 concat

    在pandas里面,另一种数据何必运算也被称为连接(concatenation).绑定(binding)或堆叠(stacking). Numpy的轴向连接, concatenation Numpy有一 ...

  3. C# 中委托和代理是一个概念吗??

    刚刚看了一下资料,发现有些资料说的是代理,有的说是委托,但都是指同一样东西delegate,委托和事件是有关的,因为事件的本质就是多播委托,关于多播委托楼主可以找找资料就知道了. 不过个人觉得这两个概 ...

  4. (转)live555 RTSP Server RTP over TCP BUG

    最近碰到一个非常棘手的问题,NVR通过ONVIF协议接入IPC进行录像,在录像时,会发现其中有个别IPC会出现录像断断续续的情况.这种情况很难复现,但是这种情况一旦出现,整个过程会一直持续很长时间,一 ...

  5. CI框架 -- URL

    移除 URL 中的 index.php 默认情况,你的 URL 中会包含 index.php 文件: example.com/index.php/news/article/my_article 如果你 ...

  6. 超酷 CSS3/HTML5 3D 飘带菜单实现教程

    今天我们来介绍一款很有创意的CSS3/HTML5菜单,首先菜单是飘带形状的,看起来很优雅,这种菜单在个人博客中用的比较多,不仅干净利落,而且很具有个性化.另外,这款菜单在鼠标滑过菜单项时,将会出现3D ...

  7. Java设计模式之七大结构型模式(附实例和详解)

    博主在大三的时候有上过设计模式这一门课,但是当时很多都基本没有听懂,重点是也没有细听,因为觉得没什么卵用,硬是要搞那么复杂干嘛.因此设计模式建议工作半年以上的猿友阅读起来才会理解的比较深刻.当然,你没 ...

  8. Python:查看矩阵大小,查看列表大小

    对于Python3.5 查看矩阵大小 >>>import numpy as np >>>from numpy import random >>>m ...

  9. spring mvc实现接口参数统一更改

    适用于post  json方式提交 使用map接收的接口参数更改. 使用@Aspect实现:

  10. 关于form表单onsubmi提交

    表单允许客户端的用户以标准格式向服务器提交数据.表单的创建者为了收集所需数据,使用了各种控件设计表单如 INPUT 或 SELECT.查看表单的用户只需填充数据并单击提交按钮即可向服务器发送数据.服务 ...