聽szhshp鐨勭涓夎竟澧冪爺绌舵墍聽锛岃浆杞借娉ㄦ槑" />
MyException - 我的异常网
当前位置:我的异常网» Web前端 » 涓€閬揓avascript闈㈣瘯棰樺紩鍙戠殑琛€妗?绮鹃€

涓€閬揓avascript闈㈣瘯棰樺紩鍙戠殑琛€妗?绮鹃€夊墠绔紑鍙慗AVASCRIPT

www.MyException.Cn  网友分享于:2013-10-08  浏览:0次
涓€閬揓avascript闈㈣瘯棰樺紩鍙戠殑琛€妗?#绮鹃€夊墠绔紑鍙慗AVASCRIPT

鏂囩珷棣栧彂浜?a style="" href="http://szhshp.org/">聽szhshp鐨勭涓夎竟澧冪爺绌舵墍聽锛岃浆杞借娉ㄦ槑

鍏堟潵鐪嬪嚑閬撻潰璇曢锛屽叕鍙哥殑寮€鍙戜滑閮藉皾璇曞仛浜嗕竴涓嬶紝鐒惰€屽熀鏈病鏈変汉鑳藉鍏ㄩ儴绛斿銆?/a>

瑕嗙洊鐨勮€冪偣寰堝锛屼篃鏈変竴浜涢毦搴︼紝棰樼洰鎸烘湁鎰忔€濆缓璁墜鍔ㄦ墽琛屼竴杈圭帺鐜┿€?/a>

Question 1

    for (var i = 0; i <5 ; i++) {
        setTimeout(function(){
            console.log(i)
        ),1000}
    }
    console.log(i)
  • Q锛氳繖閬撻鐩細杈撳嚭浠€涔堬紵
  • A锛氳繖閬撻鐩繕姣旇緝绠€鍗曪紝濡傛灉瀵笿avascript绋嶅井鏈変竴鐐规繁鍏ョ殑鍚屽閮戒細鍙戠幇杩欓亾棰樼洰寰幆閲岄潰鍑虹幇浜嗛棴鍖?/strong>锛屽洜姝よ緭鍑虹殑鏁板瓧鏄畬鍏ㄧ浉鍚岀殑锛屾渶鍚庣殑杈撳嚭涔熸槸瀹屽叏鐩稿悓鐨勩€?/li>
  • 鑰冪偣锛氶棴鍖咃紝锛堜吉锛夊紓姝?/li>

Question 2

    for (let i = 0; i <5 ; i++) { //娉ㄦ剰var鍙樻垚浜唋et
        setTimeout(function(){
            console.log(i)
        },1000)
    }
    console.log(i)
  • Q锛氳繖閬撻鐩細杈撳嚭浠€涔堬紵
  • A锛氳繖閬撻鐩叾瀹炴槸涓潙銆傞鍏堥鐩笌Q1鐨勫尯鍒氨鏄彉閲廼鐨勫畾涔夋敼涓轰簡鍏抽敭瀛條et锛屼娇鐢╨et鐨勬椂鍊欎細灏嗗彉閲忛檺鍒跺湪寰幆涔嬩腑锛屽洜姝ょ浜屼釜杈撳嚭鍏跺疄浼氭姤閿欍€傚彟澶杝etTimeout瀹炵幇浜嗭紙浼級寮傛锛屽悓鏃跺洜涓簂et灏嗗彉閲忎綔鐢ㄥ煙杩涜浜嗘帶鍒讹紝鐮村潖浜嗛棴鍖呯粨鏋勶紝鍥犳浼氭寜鐓ф甯搁『搴忚緭鍑恒€?/p>

    鍏充簬let鍏抽敭瀛梉^3]

    Use the let statement to declare a variable, the scope of which is聽restricted to the block in which it is declared. You can assign values to the variables when you declare them or later in your script.
    A variable聽declared using let cannot be used before its declaration or an error will result..

  • 鑰冪偣锛氶棴鍖咃紝锛堜吉锛夊紓姝ワ紝浣滅敤鍩?/p>

Question 3

鍚屾牱鏄疩1鐨勪唬鐮?/p>

    for (var i = 0; i <5 ; i++) {  //DO NOT MODIFY
        setTimeout(function(){ //DO NOT MODIFY
            console.log(i) 
        },1000)
    }
    console.log(i)  //DO NOT MODIFY
  • Q锛氫慨鏀逛笂杩颁唬鐮侊紙閮ㄥ垎琛屼笉鍏佽淇敼锛屽彲浠ュ湪浠g爜闂存彃鍏ワ級锛屼互瀹炵幇鈥滄瘡闅斾竴绉掕緭鍑轰竴涓暟瀛楀苟涓旈『搴忎负0-5鈥?/li>
  • A

    1. 棣栧厛鑰冨埌浜嗙牬鍧忛棴鍖呯粨鏋勶紝鐮村潖闂寘鐨勬柟娉曞緢澶氾紝鏈€绠€鍗曠殑鏄皢璺ㄥ煙鍙橀噺杞崲鎴愯寖鍥村唴鐨勫彉閲?/strong>
    2. 鍏舵鑰冨埌浜唖etTimeout浜嬩欢闃熷垪鐨勫鐞?/p>

      for (var i = 0; i <5 ; i++) {
       (function(i){
           setTimeout(function(){
               console.log(i)
           },1000*i)    
       })(i)           //灏唅浣滀负鍙傛暟浼犲叆鍖垮悕鍑芥暟锛屽姝ょ牬鍧忎簡闂寘鍐呰法鍩熻闂?/span>
      }
      setTimeout(function (){
      console.log(i);
      }, 5000);               //寮鸿灏?鏀惧埌5sec鍚庤緭鍑?/span>
      
  • 鑰冪偣锛氶棴鍖咃紝锛堜吉锛夊紓姝ワ紝浣滅敤鍩燂紝浜嬩欢闃熷垪

    Question 4

window.setTimeout(function (){
    console.log(2)
},1);

//Ouput for a long time
for (var i = 0; i < 1000; i++) {
    console.log('');
};

console.log(1)

window.setTimeout(function (){
    console.log(3)
},0);
  • Q锛氳繖閬撻鐩細杈撳嚭浠€涔堬紵
  • A锛氬彲鑳芥湁浜涘悓瀛︿細璁板緱锛宻etTimeout鏄竴涓洖璋冨嚱鏁帮紝鍥犳鏃犺寤舵椂澶氬皯缁撴灉閮芥槸鏈€鍚庤緭鍑恒€?/li>
  • 鑰冪偣锛氾紙浼級寮傛锛屼簨浠堕槦鍒?/li>

Question 5

杩欓亾棰樼洰鍏跺疄鏄叾浠栧湴鏂规妱琚潵鐨刐^2]锛屾濂藉拰涔嬪墠鑰冪偣鏈変竴瀹氶噸鍙犲洜姝や竴璧锋斁浜嗚繃鏉ワ細

    setTimeout(function(){console.log(4)},0);
    new Promise(function(resolve){
        console.log(1)

        //time consuming ops
        for( var i=0 ; i<10000 ; i++ ){
            i==9999 && resolve();
        }

        console.log(2)
    }).then(function(){
        console.log(5)
    });
    console.log(3);
  • Q锛氳繖閬撻鐩細杈撳嚭浠€涔堬紵
  • A锛氳緭鍑烘槸12354

    鍏充簬杩欎釜杈撳嚭锛屾湁濡備笅鍑犱釜閫昏緫锛?/p>

    1. 4鏄痵etTimeOut.callback鐨勮緭鍑猴紝鍔犲叆MacroTask鏈锛?/li>
    2. 杈撳嚭1
    3. 鎵цPromise.resolve()灏嗚緭鍑?鐨刢allback鏀惧埌MicroTask涓紙娉ㄦ剰杩欓噷涓嶆槸MacroTask锛?/li>
    4. 杈撳嚭2
    5. 杈撳嚭3
    6. MacroTask棣栦釜浠诲姟鎵ц瀹屾瘯
    7. 鏌ユ壘MicroTask閲岄潰鏈夋病鏈変换鍔★紝鍙戠幇鏈夛紝鎵ц锛岃緭鍑?
    8. 鏌ユ壘MacroTask閲岄潰鏈夋病鏈変换鍔★紝鍙戠幇鏈夛紝鎵ц锛岃緭鍑?
    9. 鏌ユ壘MicroTask閲岄潰鏈夋病鏈変换鍔★紝鍙戠幇娌℃湁锛屽彲浠ヤ紤鎭簡
    10. 鏌ユ壘MacroTask閲岄潰鏈夋病鏈変换鍔★紝鍙戠幇娌℃湁锛屽彲浠ョ潯瑙変簡
    11. 鎵ц瀹屾瘯

鍏充簬浜嬩欢寰幆/鍏充簬macrotask鍜宮icrotask[^1]

绠€浠?/h3>

涓€涓簨浠跺惊鐜?EventLoop)涓細鏈変竴涓鍦ㄦ墽琛岀殑浠诲姟(Task)锛岃€岃繖涓换鍔″氨鏄粠 macrotask 闃熷垪涓潵鐨勩€傚湪whatwg瑙勮寖涓湁 queue 灏辨槸浠诲姟闃熷垪銆傚綋杩欎釜 macrotask 鎵ц缁撴潫鍚庢墍鏈夊彲鐢ㄧ殑 microtask 灏嗕細鍦ㄥ悓涓€涓簨浠跺惊鐜腑鎵ц锛屽綋杩欎簺 microtask 鎵ц缁撴潫鍚庤繕鑳界户缁坊鍔?microtask 涓€鐩村埌鐪熶釜 microtask 闃熷垪鎵ц缁撴潫銆?/p>

鎬庝箞鐢?/h3>

鍩烘湰鏉ヨ锛屽綋鎴戜滑鎯充互鍚屾鐨勬柟寮忔潵澶勭悊寮傛浠诲姟鏃跺€欏氨鐢?microtask锛堟瘮濡傛垜浠渶瑕佺洿鎺ュ湪鏌愭浠g爜鍚庡氨鍘绘墽琛屾煇涓换鍔★紝灏卞儚Promise涓€鏍凤級銆?/p>

鍏朵粬鎯呭喌灏辩洿鎺ョ敤 macrotask銆?/p>

涓よ€呯殑鍏蜂綋瀹炵幇

  • macrotasks: setTimeout setInterval setImmediate I/O UI娓叉煋
  • microtasks: Promise process.nextTick Object.observe MutationObserver

浠庤鑼冧腑鐞嗚В

瑙勮寖锛?a style="" href="https://html.spec.whatwg.org/multipage/webappapis.html#task-queue">https://html.spec.whatwg.org/multipage/webappapis.html#task-queue

  • 涓€涓簨浠跺惊鐜?event loop)浼氭湁涓€涓垨澶氫釜浠诲姟闃熷垪(task queue) task queue 灏辨槸 macrotask queue
  • 姣忎竴涓?event loop 閮芥湁涓€涓?microtask queue
  • task queue == macrotask queue != microtask queue
  • 涓€涓换鍔?task 鍙互鏀惧叆 macrotask queue 涔熷彲浠ユ斁鍏?microtask queue 涓?/li>
  • 褰撲竴涓?task 琚斁鍏ラ槦鍒?queue(macro鎴杕icro) 閭h繖涓?task 灏卞彲浠ヨ绔嬪嵆鎵ц浜?/li>

鍐嶆潵鍥為【涓嬩簨浠跺惊鐜浣曟墽琛屼竴涓换鍔$殑娴佺▼

褰撴墽琛屾爤(call stack)涓虹┖鐨勬椂鍊欙紝寮€濮嬩緷娆℃墽琛岋細

  1. 鎶婃渶鏃╃殑浠诲姟(task A)鏀惧叆浠诲姟闃熷垪
  2. 濡傛灉 task A 涓簄ull (閭d换鍔¢槦鍒楀氨鏄┖)锛岀洿鎺ヨ烦鍒扮6姝?/li>
  3. 灏?currently running task 璁剧疆涓?task A
  4. 鎵ц task A (涔熷氨鏄墽琛屽洖璋冨嚱鏁?
  5. 灏?currently running task 璁剧疆涓?null 骞剁Щ鍑?task A
  6. 鎵ц microtask 闃熷垪
    1. 鍦?microtask 涓€夊嚭鏈€鏃╃殑浠诲姟 task X
    2. 濡傛灉 task X 涓簄ull (閭?microtask 闃熷垪灏辨槸绌?锛岀洿鎺ヨ烦鍒?g
    3. 灏?currently running task 璁剧疆涓?task X
    4. 鎵ц task X
    5. 灏?currently running task 璁剧疆涓?null 骞剁Щ鍑?task X
    6. 鍦?microtask 涓€夊嚭鏈€鏃╃殑浠诲姟 , 璺冲埌 b
    7. 缁撴潫 microtask 闃熷垪
  7. 璺冲埌绗竴姝?/li>

涓婇潰灏辩畻鏄竴涓畝鍗曠殑 event-loop 鎵ц妯″瀷

鍐嶇畝鍗曠偣鍙互鎬荤粨涓猴細

  1. 鍦?macrotask 闃熷垪涓墽琛屾渶鏃╃殑閭d釜 task 锛岀劧鍚庣Щ鍑?/li>
  2. 鎵ц microtask 闃熷垪涓墍鏈夊彲鐢ㄧ殑浠诲姟锛岀劧鍚庣Щ鍑?/li>
  3. 涓嬩竴涓惊鐜紝鎵ц涓嬩竴涓?macrotask 涓殑浠诲姟 (鍐嶈烦鍒扮2姝?

鍏朵粬

  1. 褰撲竴涓猼ask(鍦?macrotask 闃熷垪涓?姝e浜庢墽琛岀姸鎬侊紝涔熷彲鑳戒細鏈夋柊鐨勪簨浠惰娉ㄥ唽锛岄偅灏变細鏈夋柊鐨?task 琚垱寤恒€傛瘮濡備笅闈袱涓?
    1. promiseA.then() 鐨勫洖璋冨氨鏄竴涓?task
    1. promiseA 鏄?resolved鎴杛ejected: 閭h繖涓?task 灏变細鏀惧叆褰撳墠浜嬩欢寰幆鍥炲悎鐨?microtask queue
    1. promiseA 鏄?pending: 杩欎釜 task 灏变細鏀惧叆 浜嬩欢寰幆鐨勬湭鏉ョ殑鏌愪釜(鍙兘涓嬩竴涓?鍥炲悎鐨?microtask queue 涓?
    1. setTimeout 鐨勫洖璋冧篃鏄釜 task 锛屽畠浼氳鏀惧叆 macrotask queue 鍗充娇鏄?0ms 鐨勬儏鍐?
    
  2. microtask queue 涓殑 task 浼氬湪浜嬩欢寰幆鐨勫綋鍓嶅洖鍚堜腑鎵ц锛屽洜姝?macrotask queue 涓殑 task 灏卞彧鑳界瓑鍒颁簨浠跺惊鐜殑涓嬩竴涓洖鍚堜腑鎵ц浜?/li>
  3. click ajax setTimeout 鐨勫洖璋冩槸閮芥槸 task, 鍚屾椂锛屽寘瑁瑰湪涓€涓?script 鏍囩涓殑js浠g爜涔熸槸涓€涓?task 纭垏璇存槸 macrotask銆?/li>

鍙傝€冩枃鐚?/h1>

[^3]:聽let 璇彞 (JavaScript)聽.aspx)
[^2]:聽https://www.zhihu.com/question/36972010聽
[^1]:聽https://github.com/ccforward/cc/issues/48

文章评论

科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
程序员的鄙视链
程序员的鄙视链
中美印日四国程序员比较
中美印日四国程序员比较
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
程序员和编码员之间的区别
程序员和编码员之间的区别
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
10个调试和排错的小建议
10个调试和排错的小建议
旅行,写作,编程
旅行,写作,编程
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
鲜为人知的编程真相
鲜为人知的编程真相
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
 程序员的样子
程序员的样子
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
我的丈夫是个程序员
我的丈夫是个程序员
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
程序员应该关注的一些事儿
程序员应该关注的一些事儿
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
漫画:程序员的工作
漫画:程序员的工作
如何成为一名黑客
如何成为一名黑客
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
老程序员的下场
老程序员的下场
编程语言是女人
编程语言是女人
我是如何打败拖延症的
我是如何打败拖延症的
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
为什么程序员都是夜猫子
为什么程序员都是夜猫子
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
每天工作4小时的程序员
每天工作4小时的程序员
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
总结2014中国互联网十大段子
总结2014中国互联网十大段子
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
一个程序员的时间管理
一个程序员的时间管理
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有