涓€銆佸紩瀛?/h2>
鏈枃浠嬬粛JavaScript杩愯鏈哄埗锛岃繖涓€閮ㄥ垎姣旇緝鎶借薄锛屾垜浠厛浠庝竴閬撻潰璇曢鍏ユ墜锛?/p>
console.log(1);
setTimeout(function(){
console.log(3);
},0);
console.log(2);
璇烽棶鏁板瓧鎵撳嵃椤哄簭鏄粈涔堬紵杩欎竴棰樼湅浼煎緢绠€鍗曪紝浣嗗鏋滀綘涓嶄簡瑙avaScript杩愯鏈哄埗锛屽緢瀹规槗灏辩瓟閿欎簡銆傞鐩殑绛旀鏄緷娆¤緭鍑? 2 3锛屽鏋滀綘鏈夌枒鎯戯紝涓嬫枃鏈夎缁嗚В閲娿€?/p>
浜屻€佺悊瑙S鐨勫崟绾跨▼鐨勬蹇?/h2>
javascript璇█鐨勪竴澶х壒鐐瑰氨鏄崟绾跨▼锛屼篃灏辨槸璇达紝鍚屼竴涓椂闂村彧鑳藉仛涓€浠朵簨銆傞偅涔堬紝涓轰粈涔圝avaScript涓嶈兘鏈夊涓嚎绋嬪憿锛熻繖鏍疯兘鎻愰珮鏁堢巼鍟娿€?br>JavaScript鐨勫崟绾跨▼锛屼笌瀹冪殑鐢ㄩ€旀湁鍏炽€備綔涓烘祻瑙堝櫒鑴氭湰璇█锛孞avaScript鐨勪富瑕佺敤閫旀槸涓庣敤鎴蜂簰鍔紝浠ュ強鎿嶄綔DOM銆傝繖鍐冲畾浜嗗畠鍙兘鏄崟绾跨▼锛屽惁鍒欎細甯︽潵寰堝鏉傜殑鍚屾闂銆傛瘮濡傦紝鍋囧畾JavaScript鍚屾椂鏈変袱涓嚎绋嬶紝涓€涓嚎绋嬪湪鏌愪釜DOM鑺傜偣涓婃坊鍔犲唴瀹癸紝鍙︿竴涓嚎绋嬪垹闄や簡杩欎釜鑺傜偣锛岃繖鏃舵祻瑙堝櫒搴旇浠ュ摢涓嚎绋嬩负鍑嗭紵
鎵€浠ワ紝涓轰簡閬垮厤澶嶆潅鎬э紝浠庝竴璇炵敓锛孞avaScript灏辨槸鍗曠嚎绋嬶紝杩欏凡缁忔垚浜嗚繖闂ㄨ瑷€鐨勬牳蹇冪壒寰侊紝灏嗘潵涔熶笉浼氭敼鍙樸€?/p>
涓夈€佺悊瑙ｄ换鍔￠槦鍒?娑堟伅闃熷垪)
鍗曠嚎绋嬪氨鎰忓懗鐫€锛屾墍鏈変换鍔￠渶瑕佹帓闃燂紝鍓嶄竴涓换鍔＄粨鏉燂紝鎵嶄細鎵ц鍚庝竴涓换鍔°€傚鏋滃墠涓€涓换鍔¤€楁椂寰堥暱锛屽悗涓€涓换鍔″氨涓嶅緱涓嶄竴鐩寸瓑鐫€銆侸avaScript璇█鐨勮璁¤€呮剰璇嗗埌杩欎釜闂锛屽皢鎵€鏈変换鍔″垎鎴愪袱绉嶏紝涓€绉嶆槸鍚屾浠诲姟锛坰ynchronous锛夛紝鍙︿竴绉嶆槸寮傛浠诲姟锛坅synchronous锛?/strong>銆傚悓姝ヤ换鍔℃寚鐨勬槸锛屽湪涓荤嚎绋嬩笂鎺掗槦鎵ц鐨勪换鍔★紝鍙湁鍓嶄竴涓换鍔℃墽琛屽畬姣曪紝鎵嶈兘鎵ц鍚庝竴涓换鍔★紱寮傛浠诲姟鎸囩殑鏄紝涓嶈繘鍏ヤ富绾跨▼銆佽€岃繘鍏?浠诲姟闃熷垪"锛坱ask queue锛夌殑浠诲姟锛屽彧鏈?浠诲姟闃熷垪"閫氱煡涓荤嚎绋嬶紝鏌愪釜寮傛浠诲姟鍙互鎵ц浜嗭紝璇ヤ换鍔℃墠浼氳繘鍏ヤ富绾跨▼鎵ц銆?strong>寮傛浠诲姟鍖呮嫭瀹忎换鍔″拰寰换鍔?鍚庨潰浼氶噸鐐逛粙缁?锛屾帴涓嬫潵鎴戜滑閫氳繃涓や釜渚嬪瓙璇存槑鍚屾浠诲姟鍜屽紓姝ヤ换鍔＄殑鍖哄埆锛?/p>
console.log("A");
while(true){ }
console.log("B");
璇烽棶鏈€鍚庣殑杈撳嚭缁撴灉鏄粈涔堬紵濡傛灉浣犵殑鍥炵瓟鏄疉,鎭枩浣犵瓟瀵逛簡锛屽洜涓鸿繖鏄悓姝ヤ换鍔★紝绋嬪簭鐢变笂鍒颁笅鎵ц锛岄亣鍒皐hile()姝诲惊鐜紝涓嬮潰璇彞灏辨病鍔炴硶鎵ц銆?/p>
console.log("A");
setTimeout(function(){
console.log("B");
},0);
while(true){}
璇烽棶鏈€鍚庣殑杈撳嚭缁撴灉鏄粈涔堬紵濡傛灉浣犵殑绛旀鏄疉锛屾伃鍠滀綘鐜板湪瀵筳s杩愯鏈哄埗宸茬粡鏈変釜绮楁祬鐨勮璇嗕簡锛侀鐩腑鐨剆etTimeout()灏辨槸涓紓姝ヤ换鍔°€?strong>鍦ㄦ墍鏈夊悓姝ヤ换鍔℃墽琛屽畬涔嬪墠锛屼换浣曠殑寮傛浠诲姟鏄笉浼氭墽琛岀殑锛屽叧浜庤繖鐐逛笅鏂囪繕浼氳缁嗚鏄庛€?/p>
鍥涖€佺悊瑙vent Loop
寮傛鎵ц鐨勮繍琛屾満鍒跺涓嬶細
- 鎵€鏈夊悓姝ヤ换鍔￠兘鍦ㄤ富绾跨▼涓婃墽琛岋紝褰㈡垚涓€涓墽琛屾爤锛坋xecution context stack锛夈€?/li>
- 涓荤嚎绋嬩箣澶栵紝杩樺瓨鍦ㄤ竴涓?浠诲姟闃熷垪"锛坱ask queue锛夈€傚彧瑕佸紓姝ヤ换鍔℃湁浜嗚繍琛岀粨鏋滐紝灏卞湪"浠诲姟闃熷垪"涔嬩腑鏀剧疆涓€涓簨浠躲€?/li>
- 涓€鏃?鎵ц鏍?涓殑鎵€鏈夊悓姝ヤ换鍔℃墽琛屽畬姣曪紝绯荤粺灏变細璇诲彇"浠诲姟闃熷垪"锛岀湅鐪嬮噷闈㈡湁鍝簺浜嬩欢銆傞偅浜涘搴旂殑寮傛浠诲姟锛屼簬鏄粨鏉熺瓑寰呯姸鎬侊紝杩涘叆鎵ц鏍堬紝寮€濮嬫墽琛屻€?/li>
- 涓荤嚎绋嬩笉鏂噸澶嶄笂闈㈢殑绗笁姝ャ€?/li>
涓荤嚎绋嬩粠"浠诲姟闃熷垪"涓鍙栦簨浠讹紝杩欎釜杩囩▼鏄惊鐜笉鏂殑锛屾墍浠ユ暣涓殑杩欑杩愯鏈哄埗鍙堢О涓篍vent Loop锛堜簨浠跺惊鐜級銆傚彧瑕佷富绾跨▼绌轰簡锛屽氨浼氬幓璇诲彇"浠诲姟闃熷垪"锛岃繖灏辨槸JavaScript鐨勮繍琛屾満鍒?/strong>銆傝繖涓繃绋嬩細寰幆鍙嶅銆備互涓嬭繖寮犲浘鍙互寰堝ソ璇存槑杩欑偣銆?br>
浜斻€佸摢浜涜鍙ヤ細鏀惧叆寮傛浠诲姟闃熷垪鍙婃斁鍏ユ椂鏈?/h2>
涓€鑸潵璇达紝鏈変互涓嬪洓绉嶄細鏀惧叆寮傛浠诲姟闃熷垪锛?/p>
- setTimeout鍜宻etlnterval
- DOM浜嬩欢
- ES6涓殑Promise
- Ajax寮傛璇锋眰
javascript 浠ｇ爜杩愯鍒嗕袱涓樁娈?/strong>锛?/p>
1銆侀瑙ｆ瀽---鎶婃墍鏈夌殑鍑芥暟瀹氫箟鎻愬墠锛屾墍鏈夌殑鍙橀噺澹版槑鎻愬墠锛屽彉閲忕殑璧嬪€间笉鎻愬墠 2銆佹墽琛?--浠庝笂鍒颁笅鎵ц锛堟寜鐓s杩愯鏈哄埗锛?/strong> 鑷充簬鏀惧叆寮傛浠诲姟闃熷垪鐨勬椂鏈猴紝鎴戜滑閫氳繃 setTimeout鐨勪緥瀛愬拰Ajax渚嬪瓙鏉ヨ缁嗚鏄庯細 for寰幆涓€娆＄鍒颁竴涓?setTimeout()锛?strong>骞朵笉鏄┈涓婃妸setTimeout()鎷垮埌寮傛闃熷垪涓紝鑰岃绛夊埌涓€绉掑悗锛屾墠灏嗗叾鏀惧埌浠诲姟闃熷垪閲岄潰渚嬮1
for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
璇烽棶鏈€鍚庣殑杈撳嚭缁撴灉鏄粈涔堬紵
涓婇潰涔熸彁鍒帮紝鍦ㄥ埌杈炬寚瀹氭椂闂存椂锛屽畾鏃跺櫒灏变細灏嗙浉搴斿洖璋冨嚱鏁版彃鍏モ€滀换鍔￠槦鍒椻€濆熬閮ㄣ€傝繖灏辨槸鈥滃畾鏃跺櫒锛坱imer锛夆€濆姛鑳?/strong>銆?/p>
鍏充簬瀹氭椂鍣ㄧ殑閲嶈琛ュ厖锛?/p>
瀹氭椂鍣ㄥ寘鎷瑂etTimeout涓?setInterval 涓や釜鏂规硶銆傚畠浠殑绗簩涓弬鏁版槸鎸囧畾鍏跺洖璋冨嚱鏁版帹杩?姣忛殧澶氬皯姣鏁板悗鎵ц銆?/p>
瀵逛簬绗簩涓弬鏁版湁浠ヤ笅闇€瑕佹敞鎰忕殑鍦版柟锛?/p>
褰撶浜屼釜鍙傛暟缂虹渷鏃讹紝榛樿涓?0锛?/p>
褰撴寚瀹氱殑鍊煎皬浜?4 姣锛屽垯澧炲姞鍒?4ms(4ms 鏄?HTML5 鏍囧噯鎸囧畾鐨勶紝瀵逛簬 2010 骞村強涔嬪墠鐨勬祻瑙堝櫒鍒欐槸 10ms);涔熷氨鏄鑷冲皯闇€瑕?姣锛岃setTimeout()鎷垮埌浠诲姟闃熷垪涓€?/p>
ajax鍔犺浇瀹屾垚鏃舵墠浼氭斁鍏ュ紓姝ラ槦鍒楋紝鑷充簬杩欐鏃堕棿涓嶇‘瀹氾紝鎵€鏈夋湁涓ょ鎯呭喌锛氣憼澶т簬100ms,鏈€鍚庣殑缁撴灉鏄?d c b a ;鈶″皬浜?00ms,鏈€鍚庣殑缁撴灉渚挎槸d c a b銆?/p>
鎴戜滑涓婇潰鎻愬埌寮傛浠诲姟鍒嗕负瀹忎换鍔″拰寰换鍔★紝瀹忎换鍔￠槦鍒楀彲浠ユ湁澶氫釜锛屽井浠诲姟闃熷垪鍙湁涓€涓?/strong>銆?/p>
褰撴墽琛屾爤涓殑鎵€鏈夊悓姝ヤ换鍔℃墽琛屽畬姣曟椂锛屾槸鍏堟墽琛屽畯浠诲姟杩樻槸寰换鍔″憿锛?/strong> 涓€鍙ヨ瘽姒傛嫭涓婇潰鐨勬祦绋嬪浘锛?strong>褰撴煇涓畯浠诲姟闃熷垪鐨勪腑鐨勪换鍔″叏閮ㄦ墽琛屽畬浠ュ悗,浼氭煡鐪嬫槸鍚︽湁寰换鍔￠槦鍒椼€傚鏋滄湁锛屽厛鎵ц寰换鍔￠槦鍒椾腑鐨勬墍鏈変换鍔★紝濡傛灉娌℃湁锛屽氨鏌ョ湅鏄惁鏈夊叾浠栧畯浠诲姟闃熷垪 鎺ヤ笅鏉ユ垜浠湅涓ら亾渚嬪瓙鏉ヤ粙缁嶄笂闈㈡祦绋嬶細 鏈€鍚庤緭鍑虹粨鏋滄槸Promise1锛宻etTimeout1锛孭romise2锛宻etTimeout2 濡傛灉瑕佽緭鍑?~4锛屼笂闈緥棰樺簲璇ュ浣曚慨鏀癸紵 2.鍔犱釜绔嬪嵆鎵ц鍑芥暟 3.涔熷彲浠ラ€氳繃杩欐牱鍔犻棴鍖?/p>
鏂囩珷浜?018.11.15閲嶆柊淇敼锛屽鏋滆寰楁枃绔犲浣犳湁浜涜甯姪锛屾杩庡湪鎴戠殑GitHub鍗氬鐐硅禐鍜屽叧娉紝鎰熸縺涓嶅敖锛?/strong>渚嬮2
$.ajax({
url锛氣€渪xxxx",
success:function (result){
console.log("a")
}
})
setTimeout(function (){
console.log("b")
},100)
setTimeout(function (){
console.log("c")
})
console.log("d");鍏€佸井浠诲姟(Microtask)涓庡畯浠诲姟(Macrotask)
Promise.resolve().then(()=>{
console.log(鈥楶romise1鈥?
setTimeout(()=>{
console.log(鈥榮etTimeout2鈥?
},0)
})
setTimeout(()=>{
console.log(鈥榮etTimeout1鈥?
Promise.resolve().then(()=>{
console.log(鈥楶romise2鈥?
})
},0)
console.log(鈥?---------------- start -----------------鈥?;
setTimeout(() => {
console.log(鈥榮etTimeout鈥?;
}, 0)
new Promise((resolve, reject) =>{
for (var i = 0; i < 5; i++) {
console.log(i);
}
resolve(); // 淇敼promise瀹炰緥瀵硅薄鐨勭姸鎬佷负鎴愬姛鐨勭姸鎬?}).then(() => {
console.log(鈥榩romise瀹炰緥鎴愬姛鍥炶皟鎵ц鈥?;
})
console.log(鈥?---------------- end -----------------鈥?;涓冦€侀澶栬瘽
for (let i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}for (var i = 0; i < 5; i++) {
(function(i){
setTimeout(function() {
console.log(i);
}, 1000);
})(i)
}for(var i = 1;i < 5;i++){
var a = function(){
var j = i;
setTimeout(function(){
console.log(j);
},1000)
}
a();
}鍏€佸弬鑰冭祫鏂?/h2>
JavaScript 杩愯鏈哄埗璇﹁В锛氬啀璋圗vent Loop
鍏充簬JavaScript鍗曠嚎绋嬬殑涓€浜涗簨
JS浜嬩欢寰幆鏈哄埗锛坋vent loop锛変箣瀹忎换鍔?寰换鍔?/a>
鍓嶇鍩虹杩涢樁锛堝崄浜岋級锛氭繁鍏ユ牳蹇冿紝璇﹁В浜嬩欢寰幆鏈哄埗
浜嬩欢寰幆鏈哄埗鐨勯偅浜涗簨