异步操作

1.单线程模型

单线程模型指JavaScript只在一个线程上运行。即,JS同时只能执行一个任务,其它任务都必须在后面排队等待。
注意,JS只在一个线程上运行,不代表JS引擎只有一个线程。JS引擎有多个线程,单个脚本只能在一个线程上运行(称为主线程),其它线程都在后台配合。

(1).JS为什么采用单线程,而不是多线程?

多线程需要共享资源、且有可能修改彼此的运行结果。举例来说,如果JS同时有两个线程,一个线程在网页DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个为准? 因此,为了避免复杂性,JS一开始就是单线程

(2).单线程模型的优缺点:

优点:实现简单、执行环境相对单纯
缺点:假如某个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行。
JS语言本身并不慢,慢的是读写外部数据,比如Ajax请求返回结果。这时,如果对方服务器迟迟没有响应,或者网络不通畅,会导致脚本的长时间停滞。

2.事件循环机制(Event Loop)

IO操作(输入输出)很慢(比如Ajax操作从网络读取数据),不得不等着结果出来,再往下执行。
JavaScript 语言的设计者意识到,这时 CPU 完全可以不管 IO 操作,挂起处于等待中的任务,先运行排在后面的任务。等到 IO 操作返回了结果,再回过头,把挂起的任务继续执行下去。这种机制就是 JavaScript 内部采用的“事件循环”机制(Event Loop)。

为了利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程,但是子线程完全受主线程控制,且不得操作 DOM。所以,这个新标准并没有改变 JavaScript 单线程的本质。

2.同步任务和异步任务

程序里所有的任务,可以分成两类:同步任务 和 异步任务

(1).同步任务:指那些没有被引擎挂起、在主线程上排队执行的任务。只有前一个任务执行完毕,才能执行后一个任务

(2).异步任务:指那些被引擎放在一边,不进入主线程而进入任务队列的任务。只有引擎认为某个异步任务可以执行了(比如Ajax操作从服务器得到了结果),该任务(采用回调函数的形式)才会进入主线程执行。排在异步任务后面的代码,不用等待异步任务结束,会马上运行,即异步任务不具有"阻塞"效应。

console.log(1);
setTimeout(()=>{
  console.log(2);
},1000)
console.log(3);
//1
//3
//2

3.任务队列和事件循环

JS运行时,除了一个正在运行的主线程,引擎还提供一个任务队列,里面是各种需要当前程序处理的异步任务。(实际上,根据异步任务的类型,存在多个任务队列。为了方便理解,这里假设只存在一个队列。)
首先,主线程会去执行所有的同步任务。等到同步任务全部执行完,就会去看任务队列里面的异步任务。如果满足条件,那么异步任务就重新进入主线程开始执行,这时它就变成同步任务了。等到执行完,下一个异步任务再进入主线程开始执行。一旦任务队列清空,程序就结束执行。
异步任务的写法通常是回调函数。一旦异步任务重新进入主线程,就会执行对应的回调函数。如果一个异步任务没有回调函数,就不会进入任务队列,也就是说,不会重新进入主线程,因为没有用回调函数指定下一步的操作。
JavaScript 引擎怎么知道异步任务有没有结果,能不能进入主线程呢?答案就是引擎在不停地检查,一遍又一遍,只要同步任务执行完了,引擎就会去检查那些挂起来的异步任务,是不是可以进入主线程了。这种循环检查的机制,就叫做事件循环(Event Loop)。

4.异步操作的解决方案

(1).回调函数

function f1(){
  setTimeout(()=>{
    console.log(1)
  },1000)
}
function f2(){
  console.log(2)
}
f1();
f2();

上面的代码会先打印出2 再打印1 即f2先执行再执行f1
如何才能先执行f1 再执行f2呢? 通过回调函数,把f2写成f1的回调函数

function f1(callback){
  setTimeout(()=>{
    console.log(1)
    callback();
  },1000)
 
}
function f2(){
  console.log(2)
}
f1(f2);

(2).

5.定时器

JavaScript 提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。

1.setTimeout()

1.setTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行。它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器。

var timeId = setTimeout(func | code,delay);
console.log(1);
setTimeout('console.log(2)',1000);
console.log(3);
// 1
// 3
// 2
注意,console.log(2)必须以字符串的形式,作为setTimeout的参数。

2.如果推迟执行的是函数,就直接将函数名,作为setTimeout的参数。

function f() {
  console.log(2);
}

setTimeout(f, 1000);

3.setTimeout的第二个参数如果省略,则默认为0

setTimeout(f)
//等同于
setTimeout(f,0)

4.除了前两个参数,setTimeout还允许更多的参数,它们依次传入推迟执行的函数(回调函数)

setTimeout(function(a,b){
  console.log(a+b)
},1000,1,1)

5.for循环与setTimeout

for(var i=0;i<10;i++){
  setTimeout(function(){
      console.log(i)   
  },3000)
}
3s后打印出 10个10,setTimeout是异步任务需要在任务队列中等待同步任务执行完毕,即for循环执行完毕后i是10。

如何取到正确的i值?

(1).通过setTimeout的参数
    for(var i = 0;i<10;i++){
         setTimeout(function(i){
                console.log(i)
         },3000,i)  //通过setTimeout的其它参数向回调函数内传递
   }
上面代码,3s后连续打印出 0,1,2,3,4....9

如何每隔3s依次打印?
  for(var i = 0;i<10;i++){
         setTimeout(function(i){
                console.log(i) //每隔3s依次打印
 },3000*i,i)  
(2). 函数的作用域链????需要看
function f(a){
  setTimeout(function(){
    console.log(a)
  },3000*a)
}
for(var i=0;i<10;i++){
  f(i)
}
(3).使用es6中的let
for(let i = 0;i<10;i++){
         setTimeout(function(){
                console.log(i)
         },3000)  
   }
(4).通过立即执行函数
for(var i=0;i<10;i++){
  (function(e){
    setTimeout(function(){console.log(e)},0)
  })(i)
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,039评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,223评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,916评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,009评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,030评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,011评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,934评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,754评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,202评论 1 309
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,433评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,590评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,321评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,917评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,568评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,738评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,583评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,482评论 2 352

推荐阅读更多精彩内容