列舉js非同步編程的方法

『壹』 JS非同步載入的幾種方式

非同步載入又叫非阻塞載入，瀏覽器在下載執行js的同時，還會繼續進行後續頁面的處理。主要有三種方式。

方法一：也叫Script DOM Element

這段代碼將使JS執行5秒才完成！

JS延遲載入機制(LazyLoad)：簡單來說，就是在瀏覽器滾動到某個位置在觸發相關的函數，實現頁面元素的載入或者某些動作的執行。如何實現瀏覽器滾動位置的檢測呢？可以通過一個定時器來實現，通過比較某一時刻頁面目標節點位置和瀏覽器滾動條高度來判斷是否需要執行函數。

『貳』 javascript同步和非同步的區別與實現方式

javascript語言是單線程機制。所謂單線程就是按次序執行，執行完一個任務再執行下一個。

對於瀏覽器來說，也就是無法在渲染頁面的同時執行代碼。

單線程機制的優點在於實現起來較為簡單，運行環境相對簡單。缺點在於，如果中間有任務需要響應時間過長，經常會導致

頁面載入錯誤或者瀏覽器無響應的狀況。這就是所謂的「同步模式」，程序執行順序與任務排列順序一致。對於瀏覽器來說，

同步模式效率較低，耗時長的任務都應該使用非同步模式；而在伺服器端，非同步模式則是唯一的模式，如果採用同步模式個人認為

伺服器很快就會出現12306在高峰期的表現。。。。

非同步模式的四種方式：

1.回調函數callback

所謂回調函數，就是將函數作為參數傳到需要回調的函數內部再執行。

典型的例子就是發送ajax請求。例如：

$.ajax({

async: false,

cache: false,

dataType: 'json',

url: "url",

success: function(data) {

console.log('success');

},

error: function(data) {

console.log('error');

}

})

當發送ajax請求後，等待回應的過程不會堵塞程序運行，耗時的操作相當於延後執行。

回調函數的優點在於簡單，容易理解，但是可讀性較差，耦合度較高，不易於維護。

2.事件驅動

javascript可以稱之為是基於對象的語言，而基於對象的基本特徵就是事件驅動（Event-Driven）。

事件驅動，指的是由滑鼠和熱鍵的動作引發的一連串的程序操作。

例如，為頁面上的某個
$('#btn').onclick(function(){

console.log('click button');

});

綁定事件相當於在元素上進行監聽，是否執行注冊的事件代碼取決於事件是否發生。

優點在於容易理解，一個元素上可以綁定多個事件，有利於實現模塊化；但是缺點在於稱為事件驅動的模型後，流程不清晰。

3.發布/訂閱

發布訂閱模式（publish-subscribe pattern）又稱為觀察者模式(Observer pattern)。

該模式中，有兩類對象：觀察者和目標對象。目標對象中存在著一份觀察者的列表，當目標對象

的狀態發生改變時，主動通知觀察者，從而建立一種發布/訂閱的關系。

jquery有相關的插件，在這不是重點不細說了。。。。回頭寫個實現貼上來

4.promise模式

promise對象是CommonJS工作組提供的一種規范，用於非同步編程的統一介面。

promise對象通常實現一種then的方法，用來在注冊狀態發生改變時作為對應的回調函數。

promise模式在任何時刻都處於以下三種狀態之一：未完成（unfulfilled）、已完成（resolved）和拒絕（rejected）。以CommonJS
Promise/A
標准為例，promise對象上的then方法負責添加針對已完成和拒絕狀態下的處理函數。then方法會返回另一個promise對象，以便於形成promise管道，這種返回promise對象的方式能夠支持開發人員把非同步操作串聯起來，如then(resolvedHandler,
rejectedHandler); 。resolvedHandler
回調函數在promise對象進入完成狀態時會觸發，並傳遞結果；rejectedHandler函數會在拒絕狀態下調用。

Jquery在1.5的版本中引入了一個新的概念叫Deferred，就是CommonJS promise A標準的一種衍生。可以在jQuery中創建

$.Deferref的對象。同時也對發送ajax請求以及數據類型有了新的修改，參考JQuery API。

除了以上四種，javascript中還可以利用各種函數模擬非同步方式，更有詭異的諸如用同步調用非同步的case

只能用team里同事形容java和javascript的一句話作為結尾：

「寫java像在高速路上開車，寫javascript像在草原上開車」-------------以此來形容javascript這種無類型的語言有多自由
but，如果草原上都是坑。

『叄』 js非同步載入的方式有哪些

方法一：Script Dom Element

(function(){
var scriptEle = document.createElement("script");
scriptEle.type = "text/javasctipt";
scriptEle.async = true;
scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js";
var x = document.getElementsByTagName("head")[0];
x.insertBefore(scriptEle, x.firstChild);
})();
方法二：onload時的非同步載入
function(){
if(window.attachEvent){
window.attachEvent("load", asyncLoad);
}else{
window.addEventListener("load", asyncLoad);
}
var asyncLoad = function(){
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
}
})();

方法三：$(document).ready()

『肆』 JS中的非同步操作有哪些

JS中的非同步操作：
1、定時器都是非同步操作
2、事件綁定都是非同步操作
3、AJAX中一般我們都採取非同步操作（也可以同步）
4、回調函數可以理解為非同步（不是嚴謹的非同步操作）

『伍』 前端開發中如何實現非同步編程

非同步編程其實很常見，特別是在出線Node.js之後，非同步編程更是讓很多開發者受益。那麼回到最初的地方，傳統的前端開發中如何實現非同步編程呢？下面列舉了js實現非同步編程的四種方式。
方法一：使用回調函數
方法二：事件監聽
可以定義一個事件，並為這個事件設定處理函數。這樣只有當這個時間發生的情況下，對應的處理函數才會被執行。

方法三：事件的發布/訂閱

這個模式在NodeJS以及其他JS框架中都有實現，是一個非常常用的非同步編程方式。具體的原理及實現方法可以參考我之前的博客：http://blog.csdn.net/fareise/article/details/52198877《 Node中EventEmitter以及如何實現JavaScript中的訂閱/發布模式》，裡面有比較詳細的解析。

方法四：Promise模式

ES6中提供了原生的Promise對象，這個模式最開始只是一個構想，後來由一些框架庫實現。Promise對象代表了未來才會知道結果的事件。

Promise的基本思路就是，將需要非同步執行的事件儲存起來，然後根據非同步事件之行後的結果狀態執行下一步的操作。具體的Promise對象的原理和ES6中的使用方法將在下一篇文章中更加深入的進行介紹。

『陸』 如何進行nodejs非同步編程

更新下，我之所以讓您玩一下AJAX，是希望您體驗一下非同步，並不是希望您了解AJAX這機制的實現方法，因為AJAX是一個特別典型且簡單的非同步場景，比如：
執行某個函數 -> 執行語句A,B,C,D -> 在D語句發起非同步請求，同時向引擎注冊一個回調事件 -> 執行E,F,G ->退出函數塊 ，引擎Loop...Loop...Loop，此時非同步的請求得到了Response，之前注冊的回調被執行。

『柒』 js如何非同步執行方法

var xmlHttp;
function createXMLHttpRequest(){
//Mozilla 瀏覽器（將XMLHttpRequest對象作為本地瀏覽器對象來創建）
if(window.XMLHttpRequest){ //Mozilla 瀏覽器
xmlHttp = new XMLHttpRequest();
}else if(window.ActiveXObject) { //IE瀏覽器
//IE瀏覽器（將XMLHttpRequest對象作為ActiveX對象來創建）
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
if(xmlHttp == null){
alert("不能創建XMLHttpRequest對象");
return false;
}
}
//用於發出非同步請求的方法
function sendAsynchronRequest(url,parameter,callback){
createXMLHttpRequest();
if(parameter == null){
//設置一個事件處理器，當XMLHttp狀態發生變化，就會出發該事件處理器，由他調用
//callback指定的javascript函數
xmlHttp.onreadystatechange = callback;
//設置對拂去其調用的參數（提交的方式，請求的的url，請求的類型（非同步請求））
xmlHttp.open("GET",url,true);//true表示發出一個非同步的請求。
xmlHttp.send(null);
}else{
xmlHttp.onreadystatechange = callback;
xmlHttp.open("POST",url,true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
xmlHttp.send(parameter);
}
}
//以上代碼是通用的方法，接下來是調用以上的方法
function loadPros(title,count,pid,cid,level){
// 調用非同步請求方法
url = "。。。。。。。。";
sendAsynchronRequest(url,null,loadCallBack);
}
// 指定回調方法
function loadCallBack(){
try
{
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
if(xmlHttp.responseText != null && xmlHttp.responseText != ""){
var divProid = document.getElementById('videolist');
divProid.innerHTML = xmlHttp.responseText;
for(i=0;i<len;i++)
{
var video_url = document.getElementById("videolist"+i+"").href;
if(video_url != undefined && video_url != null && video_url != ""){
window.location.href = video_url;
}
}
}
}
}
if (xmlHttp.readyState == 1)
{
//alert("正在載入連接對象......");
}
if (xmlHttp.readyState == 2)
{
//alert("連接對象載入完畢。");
}
if (xmlHttp.readyState == 3)
{
//alert("數據獲取中......");
}
}
catch (e)
{
//alert(e);
}
}

『捌』 如何進行nodejs非同步編程

我建設玩一下AJAX，是希望您體驗一下非同步，並不是希望您了解AJAX這機制的實現方法，因為AJAX是一個特別典型且簡單的非同步場景，比如：
執行某個函數 -> 執行語句A,B,C,D -> 在D語句發起非同步請求，同時向引擎注冊一個回調事件 -> 執行E,F,G ->退出函數塊 ，引擎Loop...Loop...Loop，此時非同步的請求得到了Response，之前注冊的回調被執行。

實際上Node.js主要是為了應對主流web app存在大量I/O等待而CPU閑置的場景所衍生的解決方案，而在架構上，它的後端有一個底層的worker封裝，每當你有一個諸如addUser這樣的I/O操作時，它們都會被交由worker去執行從而達到讓出盡快讓出當前函數的執行權的目的，在向引擎注冊完回調後，內部會通過事件輪詢去檢查該I/O事件的句柄，當句柄顯示該事件操作完成後，則注冊的回調則被執行。

所以，假設有人（按題設，簡化一下場景，有且只有2個人）同時請求addUser(A)和userList(B)，B的請求會在執行完A的請求內部所有同步代碼後被執行，而哪怕worker此時仍然在進行addUser 這一 I/O操作，用戶B也並不會被引擎掛起或者等待。這就是為什麼Node.js單節點卻一樣可以擁有高負載能力的原因。

至於什麼樣的代碼是非同步的，你看看node文檔里fs模塊的使用方法就知道了，大概的形式就是如下這種。
mole.method( args [,callback] )

當然還有一種比較極端的情況，假設您使用的資料庫是山寨的，驅動是基於同步實現的，那麼B就該等多久等多久把，樹蔭底下喝杯茶，下個棋，和後面的C,D,E,F,G打個招呼唄~~~

我推薦您先去玩一下前端的AJAX了解一下 非同步編程方式，體驗一下非同步的「感覺」，然後看一本叫《JavaScript非同步編程》的書。

Node.js 是一款基於Event-driven的模型構建的Framework，它典型的特徵就是通過內置的事件輪詢來調度事件，通常來說node.js的資料庫驅動都是基於非同步實現的，所以在實際情況中，A提交博客和B注冊用戶這兩個請求是可以同時由Node.js 來handle，並按照實際操作的處理事件分別調度給予瀏覽器響應。

當然，假設您在業務代碼里寫了一個耗時很久的同步代碼（比如直接寫一個while(true)的loop，Node就死了），由於JavaScript本身單線程的限制，所以整個App就會被block住，後續的事件/程序只有等到該段代碼執行完成之後才會被處理，這也是為什麼我們通常不建議在Node.js層做大規模計算（JS本身的計算效率太低，會導致Node吞吐量會大大降低），而傾向由C++的拓展去實現。

『玖』 下面哪些方法可以用作javascript非同步模式的編程

javascript語言是單線程機制。所謂單線程就是按次序執行，執行完一個任務再執行下一個。

對於瀏覽器來說，也就是無法在渲染頁面的同時執行代碼。

單線程機制的優點在於實現起來較為簡單，運行環境相對簡單。缺點在於，如果中間有任務需要響應時間過長，經常會導致

頁面載入錯誤或者瀏覽器無響應的狀況。這就是所謂的逗同步模式地，程序執行順序與任務排列順序一致。對於瀏覽器來說，

同步模式效率較低，耗時長的任務都應該使用非同步模式；而在伺服器端，非同步模式則是唯一的模式，如果採用同步模式個人認為

伺服器很快就會出現12306在高峰期的表現。。。。

非同步模式的四種方式：

1.回調函數callback

所謂回調函數，就是將函數作為參數傳到需要回調的函數內部再執行。

典型的例子就是發送ajax請求。例如：

$.ajax({

async: false,

cache: false,

dataType: 'json',

url: "url",

success: function(data) {

console.log('success');

},

error: function(data) {

console.log('error');

}

})

當發送ajax請求後，等待回應的過程不會堵塞程序運行，耗時的操作相當於延後執行。

回調函數的優點在於簡單，容易理解，但是可讀性較差，耦合度較高，不易於維護。

2.事件驅動

javascript可以稱之為是基於對象的語言，而基於對象的基本特徵就是事件驅動（Event-Driven）。

事件驅動，指的是由滑鼠和熱鍵的動作引發的一連串的程序操作。

例如，為頁面上的某個
$('#btn').onclick(function(){

console.log('click button');

});

綁定事件相當於在元素上進行監聽，是否執行注冊的事件代碼取決於事件是否發生。

優點在於容易理解，一個元素上可以綁定多個事件，有利於實現模塊化；但是缺點在於稱為事件驅動的模型後，流程不清晰。

3.發布/訂閱

發布訂閱模式（publish-subscribe pattern）又稱為觀察者模式(Observer pattern)。

該模式中，有兩類對象：觀察者和目標對象。目標對象中存在著一份觀察者的列表，當目標對象

的狀態發生改變時，主動通知觀察者，從而建立一種發布/訂閱的關系。

jquery有相關的插件，在這不是重點不細說了。。。。回頭寫個實現貼上來

4.promise模式

promise對象是CommonJS工作組提供的一種規范，用於非同步編程的統一介面。

promise對象通常實現一種then的方法，用來在注冊狀態發生改變時作為對應的回調函數。

promise模式在任何時刻都處於以下三種狀態之一：未完成（unfulfilled）、已完成（resolved）和拒絕（rejected）。以CommonJS
Promise/A
標准為例，promise對象上的then方法負責添加針對已完成和拒絕狀態下的處理函數。then方法會返回另一個promise對象，以便於形成promise管道，這種返回promise對象的方式能夠支持開發人員把非同步操作串聯起來，如then(resolvedHandler,
rejectedHandler); 。resolvedHandler
回調函數在promise對象進入完成狀態時會觸發，並傳遞結果；rejectedHandler函數會在拒絕狀態下調用。

Jquery在1.5的版本中引入了一個新的概念叫Deferred，就是CommonJS promise A標準的一種衍生。可以在jQuery中創建

$.Deferref的對象。同時也對發送ajax請求以及數據類型有了新的修改，參考JQuery API。

除了以上四種，javascript中還可以利用各種函數模擬非同步方式，更有詭異的諸如用同步調用非同步的case

只能用team里同事形容java和javascript的一句話作為結尾：

逗寫java像在高速路上開車，寫javascript像在草原上開車地-------------以此來形容javascript這種無類型的語言有多自由
but，如果草原上都是坑。

『拾』 js回調函數如何實現非同步，給一個例子

非同步處理不用阻塞來等待處理完成，而是允許後續操作，直至其程序將處理完成，並回調通知此函數

那麼在js中有如下幾種非同步方式：

示例1

varasync=function(callback){
//readdata
setTimeout(function(){
callback('data');
},1000);//1秒後回調
};
//使用
async(function(data){
alert(data);
});

示例2

varasync=function(callback){
varxhr=newXMLHttpRequest();
xhr.open('get','.',true);

xhr.onreadystatechange=function(){
callback(xhr.readyStatus);
};
xhr.send();
};

async(function(data){
alert(data);
});

示例3

varasync=function(callback){
varimg=newImage();
img.onload=img.onerror=function(){
callback(img);
};
img.src='x.jpg';
};
async(function(data){
alert(data);
});