來源:互聯網
上載者:User
關鍵字
javascript
html5
node.js
php
AJAX的方法源碼我看過,就是AJAX方法裡面調用一個回調,先執行AJAX方法再執行回調,這跟普通的的引用函數 有什麼區別呢?那麼AJAX的非同步回調在體驗在哪裡;
回複內容:
AJAX的方法源碼我看過,就是AJAX方法裡面調用一個回調,先執行AJAX方法再執行回調,這跟普通的的引用函數 有什麼區別呢?那麼AJAX的非同步回調在體驗在哪裡;
上面幾位真是所答非所問。
首先瀏覽器的js引擎是單線程的,執行一個耗時操作必定阻礙線程後續代碼的執行(比如等待網路請求的響應)。一些語言採用了開一個子線程並把耗時操作放到子線程去執行的辦法解決了這個問題。
js引擎本身不支援多線程,但是瀏覽器基本上都有三個線程:js引擎線程、事件觸發線程、http請求線程。後兩個線程在觸發後會把對應的回呼函數放到js引擎線程的執行隊列中進行排隊等待,只要js引擎線程空閑就會依次執行加入到隊列中的回呼函數。當然這些回呼函數的執行依然是阻礙線程的。
頁面無重新整理進行資料請求,返回資料通過js操作DOM,使用者體驗良好;單純調用js函數僅對前端有操作,沒有與伺服器的互動;AJAX是組合技術,提升使用者體驗,不必每次請求都重新整理整個頁面,即js操作dom進行局部重新整理
在我看來本質上沒有區別,一個傳入函數,一個是類似物件導向中我多態覆蓋(執行預設或者自訂覆蓋的)
傳引用
比如:
// 擷取使用者資料
function getDate() {
}
// 登陸
function login(cb) {
// 登陸邏輯.... // 登陸成功後執行回調引用 if (cb && typeof cb === 'function') { cb(); }
}
login(getDate);
ajax內部可能實現(不確保是這樣的,只是類比一下)
function XMLHttpRequest() {
}
// 可以有預設的也可以沒有,沒有在send回調執行時判斷一下就行了
XMLHttpRequest.prototype.onreadystatechange = function () {};
XMLHttpRequest.prototype.get = function (url) {
this.url = url;
};
XMLHttpRequest.prototype.send = function () {
// 發送http請求,修改readyState等 // 從this.url擷取資料 // 適時調用onreadystatechange, 沒有預設onreadystatechange時判空 if (this.onreadystatechange && typeof this.onreadystatechange === 'function') { this.onreadystatechange(); }
};
var ajax = new XMLHttpRequest();
ajax.get(url);
ajax.onreadystatechange = function () {
// 覆蓋預設的,或者沒有預設的話重新定義
};
ajax.send();
你換成2G網路就能看出區別了 請求慢的時候下面的代碼會繼續執行 如果用同步 就乾等著吧