WebStorm editor class generics input redux mysqli request Plupload vue教程 vue滑动事件 webform开发教程 java上传图片 python循环 python注释 python教程推荐 python安装程序 java中正则表达式 java的random java怎么写接口 java获得当前日期 java获取文件 python网站开发实例 0x0000004e popen stata软件 js上传图片 微信超级好友 8元秒电脑 js日期格式化 ps调整边缘抠头发丝 mac版matlab oemdiy WVS python编辑器 华为mate8和p9哪个好 js继承的几种方式 opencv是什么 小米账号怎么退出 大数据就业方向
当前位置: 首页 > 学习教程  > 编程语言

JS中的同步和异步

2020/10/8 18:16:57 文章标签:

JS中的同步和异步 单线程语言 js是一门单线程语言,所谓"单线程",就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。如果一个任务耗时过…

JS中的同步和异步

单线程语言

js是一门单线程语言,所谓"单线程",就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。如果一个任务耗时过长,那么后面的任务就必须一直等待下去,会拖延整个程序,常见浏览器无反应,可能就是一段代码死循环,造成程序卡住在这个位置,无法继续。而js之所以会是单线程语言的原因和它的用途有很大的关系,我们都知道,JavaScript作为浏览器的脚本语言,主要用来实现与用户的交互,利用JavaScript,我们可以实现对DOM的各种各样的操作,如果JavaScript是多线程的话,一个线程在一个DOM节点中增加内容,另一个线程要删除这个DOM节点,那么这个DOM节点究竟是要增加内容还是删除呢?这会带来很复杂的同步问题,因此,JavaScript是单线程的。
所以为了解决这个问题,js的任务执行模式分为两种:同步和异步。

同步

"同步任务"就是指在主线程上排队执行的任务,只有前一个任务执行完毕,才能继续执行下一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。当我们打开网站时,网站的渲染过程,比如元素的渲染,其实就是一个同步任务
例:

// 同步代码
function fun1() {
  console.log(1);
}
function fun2() {
  console.log(2);
}
fun1();
fun2();

// 输出
//1
//2

很容易可以看出,输出会依次输入1,2,因为代码是从上到下依次执行,执行完fun1(),才继续执行fun2()。

异步

"异步任务"是指不进入主线程,而进入任务队列的任务,只有任务队列通知主线程,某个异步任务可以执行了,该任务才会进入主线程,当我们打开网站时,像图片的加载,音乐的加载,其实就是一个异步任务。
例:

function fun1() {
  console.log(1);
}
function fun2() {
  console.log(2);
}
function fun3() {
  console.log(3);
}
fun1();
setTimeout(function(){
  fun2();
},0);
fun3();
 
// 输出
//1
//3
//2

因为setTimeout函数是异步的执行的,所以它之中的任务会等到满足执行条件时才会进入主线程,而不是一开始就在主线程之中,所以使用它可以控制js的执行顺序。

异步的机制

(1)所有同步任务都在主线程上执行,行成一个执行栈。
(2)主线程之外,还存在一个任务队列,只要异步任务有了结果,就会在任务队列中放置一个事件。
(3)一旦执行栈中的所有同步任务执行完毕,系统就会读取任务队列,看看里面还有哪些事件,那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
(4)主线程不断的重复上面的第三步。

实现异步的方法

实现异步模式的方法有很多,比较常用的有:
(1)延迟类:setTimeout、setInterval、requestAnimationFrame、setImmediate。
(2)监听事件实现的类型:监听new Image加载状态、监听script加载状态、监听iframe加载状态、Message。
(3)带有异步功能类型 Promise、ajax等等。


本文链接: http://www.dtmao.cc/news_show_250024.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?