已解決430363個問題，去搜搜看，總會有你想問的

js中函數和變量的訪問順序？

首頁猿問 js中函數和變量的訪問順序？

js中函數和變量的訪問順序？

JavaScript

慕田峪9158850 2018-08-15 10:10:45

新學HTML5，遇到個問題，我在利用input type="file"控件讀取本地的JSON文件里的JSON數據并插入到body中去，代碼如下：<script> var aa = 1; var loadFiles = document.getElementById("loadFiles");//獲取id為loadFiles的input對象 function handleFiles(files){ if(files.length){ var file = files[0]; var reader = new FileReader(); reader.readAsText(file); reader.onload = function(){ aa = 2; console.log(aa); }; console.log(aa); } }</script><body><input type="file" id='loadFiles' onchange="handleFiles(this.files)" /><div id="filesContent" ></div></body>我發現兩次console.log打印的結果，反而是先aa=1被打印出來，其次onload函數里面的aa=2才被打印出來，我查資料得知reader的onload方法是在它調用readAsText方法后立即調用的，為什么會先打印后面的console（也就是說我在onload方法外面調用的全是aa=1），這個onload函數和后面的console調用順序究竟是怎樣？

查看完整描述

1 回答

湖上湖

TA貢獻2003條經驗獲得超2個贊

跟文件大小、讀取時間耗時長短無關。
先輸出1后輸出2是必然的！

證明如下：

首先寫一個阻塞函數，用于阻塞JS執行線程一段時間：

function block(delay) {    var end = +new Date() + delay;    while(+new Date() <= end){}
}

然后，把它加到你的代碼中：

reader.readAsText();block(5000);reader.onload = function() {
    console.log(2);};block(5000);console.log(1);

結果是什么？是不論你阻塞多長時間，結果都是先輸出1，后輸出2。

結論就是：

onload回調函數被設計成了不在當前這一輪事件循環調用。

所以，哪怕文件內容瞬間就被讀完了，結果也是先輸出1。
這不是一個概率性的結論，而是一個確定的結論。

參考：徹底理解同步、異步和事件循環

反對回復 2018-09-26

1 回答
0 關注
642 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

js中函數和變量的訪問順序？

js中函數和變量的訪問順序？

1 回答

添加回答

js中函數和變量的訪問順序？

js中函數和變量的訪問順序？