2016-08-24 31 views
1

私はこの単純な方法で私のサーバー上にある.txtファイルの読み込みいる:それに応じてこの投稿に、Javascriptのテキストファイルの読み込み遅延

function getFileFromServer(url, doneCallback) 
{ 
console.time("getFileFromServer"); 
var xhr; 

xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = handleStateChange; 
xhr.open("GET", url, true); 
xhr.send(); 

function handleStateChange() { 
    if (xhr.readyState === 4) { 
     doneCallback(xhr.status == 200 ? xhr.responseText : null); 
    } 
} 
console.timeEnd("getFileFromServer"); 
} 

私はこの単純な方法でそれを使用していた:Reading a txt file from Server, writing it to website

function loadFile(url) { 
    console.time("loadFile"); 
    getFileFromServer(url, function(text) { 
    if (text === null) { 
     console.log("error-loading-file"); 
    } 
    else { 
     console.timeEnd("loadFile"); 
     doStuff(text); 
    } 
}); 

ご覧のとおり、console.timeを入れてタイミングを記録しています。ここでは、ブラウザのコンソール答え何ですか:

getFileFromServer:1.744ms

loadFileはは:

を18114.871ms私はjavascriptの専門家ではない、と私はタイミングの違いを説明するために把握することができる唯一のことはあります引数渡し(値とC++での参照) 誰かがこのタイミングの違いを私に説明できますか?

+0

これは、ajax呼び出しの非同期性のためです。 http://stackoverflow.com/questions/11233633/understanding-asynchronous-code-in-laymans-terms – shakib

答えて

1

getFileFromServerが非常に速く終了する理由は、実際の処理が行われていないことです。この関数は、サーバーから要求が返されるまで待機しませんが、はコールバック関数のみを登録します。つまり、には1.744msかかり、それ以上のリクエストはに送信されます。

loadFile機能は、要求を送信して実際に応答を得るまでの時間を測定しています。それが違いです。