這是一篇給前端小白看的文章,大神請繞道~~~不送~~
我們先來看一到一道面試題,一共5行代碼,問輸出結果是什么。
for(var i=0; i<5; i++){
setTimeout(function(){
console.log(i);
},1000);
}
這道題的正確率僅有50%,對于前端初學者更是難上加難,不能理解。
先說同步執行,就是規定代碼必須自上而下執行。等上一行代碼執行完,才能執行下一行的代碼。
好比我們闖關游戲,甭管這關有多難,你都得通關后才能開啟下一關。像這段代碼,

js的同步執行
中間的for循環,要循環兩萬次,那也等它循環結束后再執行下面的代碼。
這就是同步執行,在js語言中,大部分都是同步執行的。
再來說異步,js中少有的異步,一定要記牢。
1.定時器 setTimeout setinterval
2.ajax的異步請求
3.es6中的promise
看這段代碼,

ajax的異步編程
先執行第二行的變量聲明,然后執行ajax的異步請求,這時,如果是同步,就會等請求結束后,才會執行下面的代碼。而異步的好處就是,不用等待請求是否結束,仍然可以執行下面的代碼,向控制臺打印變量。一般請求時間是不固定的,異步的話,就能大大節省打開頁面的時間。
再看這段代碼,

定時器也是異步編程
第三行設置了一個定時器,定時器也是異步的,無論何種定時器,函數里面的內容都不會在這里執行。
都要等到瀏覽器打開時才會依照時間順序執行。所以對于異步,可以理解為不會阻塞下面代碼執行。
最后,我們再看一下片頭的這道面試題。
for(var i=0; i<5; i++){
setTimeout(function(){
console.log(i);
},1000);
}
我們知道,for循環是同步執行的,循環了5次,分別設置了5個定時器,
這5個定時器,等瀏覽器打開時,會依次執行函數里的內容,console.log(i);
i是全局變量,此時已隨著for循環從0遞增成了5。所以最后的結果是,5個5。