① javascript同步和非同步的區別與實現方式
舉個生活中的示例就會很明白：
如：
早上起床,先刷牙,再燒水,等水燒開了洗臉,再整理發型.是同步
先刷牙,再燒水,再整理發型,等水壺滴的一聲通知我水燒開了,我再取剛燒開的水洗臉,是非同步.
<script>
varflag=false;
functionfuncTest(t,func){
setTimeout(function(){
(function(param){
console.log(param);
func();
}(t));
},t*1000);
}
varfuncList=[];
funcList.push(function(){funcTest(4,function(){
flag=true;//同步標記量
})});//不同的非同步函數添加進隊列
funcList.push(function(){funcTest(3,function(){
flag=true;
})});//不同的非同步函數添加進隊列
funcList.push(function(){funcTest(2,function(){
flag=true;
})});//不同的非同步函數添加進隊列
dealFuncSync(funcList);
functiondealFuncSync(funcList){
functioncallBackSync(){
if(!funcList||funcList.length==0){
console.log('end');
return;
}
flag=false;
funcList.shift()();
setTimeout(function(){
if(flag){//控制隊列函數同步
callBackSync();
}else{
setTimeout(arguments.callee,100);
}
},100);
}
callBackSync();
}
</script>
② 前端開發中如何實現非同步編程
非同步編程其實很常見，特別是在出線Node.js之後，非同步編程更是讓很多開發者受益。那麼回到最初的地方，傳統的前端開發中如何實現非同步編程呢？下面列舉了js實現非同步編程的四種方式。
方法一：使用回調函數
方法二：事件監聽
可以定義一個事件，並為這個事件設定處理函數。這樣只有當這個時間發生的情況下，對應的處理函數才會被執行。
方法三：事件的發布/訂閱
這個模式在NodeJS以及其他JS框架中都有實現，是一個非常常用的非同步編程方式。具體的原理及實現方法可以參考我之前的博客：http://blog.csdn.net/fareise/article/details/52198877《 Node中EventEmitter以及如何實現JavaScript中的訂閱/發布模式》，裡面有比較詳細的解析。
方法四：Promise模式
ES6中提供了原生的Promise對象，這個模式最開始只是一個構想，後來由一些框架庫實現。Promise對象代表了未來才會知道結果的事件。
Promise的基本思路就是，將需要非同步執行的事件儲存起來，然後根據非同步事件之行後的結果狀態執行下一步的操作。具體的Promise對象的原理和ES6中的使用方法將在下一篇文章中更加深入的進行介紹。
③ 怎樣用JS實現非同步轉同步
源起
小飛是一名剛入行前端不久的新人，因為進到了某個大公司，儼然成為了學弟學妹眼中'大神'，大家遇到js問題都喜歡問他，這不，此時他的qq彈出了這樣一條消息
"hi,大神在嗎？我有個問題想問，現在我們的代碼裡面有這樣的東西,可是得不到正確的返回結果
1234567functiongetDataByAjax () {return$.ajax(...postParam)}vardata = getDataByAjax()if(data) {console.log(data.info)}"哦，你這里是非同步調用，不能直接獲得返回值，你要把if語句寫到回調函數中",小飛不假思索的說到，對於一個『專業』的fe來說，這根本不是一個問題。
「可是我希望只是改造getDataByAjax這個方法，讓後面的代碼成立。」
「研究這個沒有意義，非同步是js的精髓，同步的話會阻塞js調用，超級慢的，但是你要一再堅持的話，用async:true就好了」
「不愧是大神，我回去立刻試一試，么么噠」
兩天後，她哭喪著臉登上了qq
「試了一下你的方法，但是根本行不通，哭~~」
「別急，我看看你這個postParam的參數行嗎」
"這是一個jsonp請求啊，老掉牙的東西了，，jsonp請求是沒有辦法同步的"
「我知道jsonp請求的原理是通過script標簽實現的，但是，你看，script也是支持同步的呀，你看tags/attscriptasync.asp」
「額，那可能是jquery沒有實現吧，哈哈」
「大神，你能幫我實現一個jsonp的同步調用方式嘛，拜託了(星星眼)」
雖然他有點奇怪jquery為什麼沒有實現，但是既然w3school的標准擺在那裡，碼兩行代碼又沒什麼，
額，運行起來結果竟然是undefined！w3cshool的文檔竟然也不準，還權威呢，我看也不怎麼著，小飛暗自想到。
「剛才試了一下，w3school文檔上寫的有問題，這個非同步屬性根本就是錯的」
「可是我剛還試過一次這個，我確認是好的呀」
(有興趣的同學可以實現以下兩個js，並且加上async的標簽進行嘗試。)
「這個，我就搞不清楚了」，小飛訕訕的說到
對方已離線
抽象
關於這個問題，相信不只是小飛，很多人都難以解答。為什麼ajax可以做到同步，但jsonp不行，推廣到nodejs上，為什麼readFile也可以做到同步(readFileSync)，但有的庫卻不行。
（至於script的async選項我們暫時避而不談，是因為現在的知識維度暫時還不夠，但是不要著急，下文中會給出明確的解釋）
現在，讓我們以計算機科學的角度抽象這個問題：
我們是否可以將非同步代碼轉化為同步代碼呢？(ASYNCCALL => SYNCCALL)
既然是抽象問題，那麼我們就可以不從工程角度/性能角度/實現語言等等等方面來看(同步比非同步效率低下),每增加一個維度，復雜程度將以幾何爆炸般增長下去。
首先，我們來明確一點，==在計算機科學領域==同步和非同步的定義
同步（英語：Synchronization），指對在一個系統中所發生的事件（event）之間進行協調，在時間上出現一致性與統一化的現象。在系統中進行同步，也被稱為及時（in time）、同步化的（synchronous、in sync）。--摘自網路
非同步的概念和同步相對。即時間不一致，不統一
明確了這一點，我們可以藉助甘特圖來表示同步和非同步
注意看我們標紅的地方，如果你完成了小測驗1，就會得到和這張圖一致的順序
==同步執行的代碼片段必然在非同步之前。==
所以，無論從理論還是實際出發，我們都不得不承認，在js中，把非同步方法改成同步方法這個命題是水月鏡花
哦對了，最後還需要解釋一下最開始我們埋下的坑， 為什麼jsonp中的async沒有生效，現在解釋起來真的是相當輕松，即document.appendChild的動作是交由dom渲染線程完成的，所謂的async阻塞的是dom的解析，而非js引擎的阻塞。實際上，在async獲取資源後，與js引擎的交互依舊是push taskQueue的動作，也就是我們所說的async call
推薦閱讀： 關於dom解析請大家參考webkit技術內幕第九章資源載入部分
峰迴路轉
相信很多新潮的同學已經開始運用切了async/await語法，在下面的語法中，getAjax1和console之間的具有同步的特性
1234asyncfunction() {vardata = await getAjax1()console.log(data)}講完了event loop和非同步的本質，我們來重新審視一下async/await。
老天，這段代碼親手推翻了==同步執行的代碼片段必然在非同步之前。== 的黃金定律！
驚不驚喜，意不意外，這在我們的模型里如同三體里的質子一樣的存在。我們重新審視了一遍上面的模型，實在找不到漏洞，找不到任何可以推翻的點，所以真的必須承認，async/await絕對是一個超級神奇的魔法。
到這里來看我們不得不暫時放棄前面的推論，從async/await本身來看這個問題
相信很多人都會說，async/await是CO的語法糖，CO又是generator/promise的語法糖，好的，那我們不妨去掉這層語法糖，來看看這種代碼的本質, 關於CO，讀的人太多了，我實在不好老生常談，可以看看這篇文章，咱們就直接繞過去了,這里給出一個簡易的實現
/5800210.html
終於，我們發現了問題的關鍵，如果單純的看wait生成器(注意，不是普通的函數)，是不是覺得非常眼熟。這就是我們最開始提出的spinlock偽代碼！！！
這個已經被我們完完全全的否定過了，js不可能存在自旋鎖，事出反常必有妖，是的，yield和*就是表演async/await魔法的妖精。
generator和yield字面上含義。Gennerator叫做生成器，yield這塊ruby，python，js等各種語言界爭議很大，但是大多數人對於『讓權』這個概念是認同的(以前看到過maillist上面的爭論，但是具體的內容已經找不到了)
擴展閱讀---ruby元編程 閉包章節yield(ruby語義下的yield)
所謂讓權，是指cpu在執行時讓出使用權利，操作系統的角度來看就是『掛起』原語，在eventloop的語義下，似乎是暫存起當時正在執行的代碼塊(在我們的eventloop裡面對應runPart)，然後順序的執行下一個程序塊。
我們可以修改eventloop來實現讓權機制
小測驗2 修改eventloop使之支持yield原語
至此，通過修改eventloop模型固然可以解決問題，但是，這並不能被稱之為魔法。
和諧共存的世界
實際上通過babel，我們可以輕松的降級使用yield,（在es5的世界使用讓權的概念！！）
看似不可能的事情，現在，讓我們撿起曾經論證過的
==同步執行的代碼片段必然在非同步之前。== 這個定理，在此基礎上進行進行逆否轉化
==在非同步代碼執行之後的代碼必然不是同步執行的(非同步的)。==
這是一個圈子裡人盡皆知的話，但直到現在他才變得有說服力（我們繞了一個好長的圈子）
現在，讓我們允許使用callback，不使用generator/yield的情況下完成一個wait generator相同的功能！！！
太棒了，我們成功的完成了generator到function的轉化(雖然成本高昂)，同時，這段代碼本身也解釋清楚了generator的本質，高階函數，片段生成器，或者直接叫做函數生成器！這和scip上的翻譯完全一致,同時擁有自己的狀態(有限狀態機)
推薦閱讀 計算機程序的構造和解釋 第一章generator部分
小測驗3 實際上我們提供的解決方式存在缺陷，請從作用域角度談談
其實，在不知不覺中，我們已經重新發明了計算機科學中大名鼎鼎的CPS變換
Continuation-passing_style
最後的最後，容我向大家介紹一下facebook的CPS自動變換工具--regenerator。他在我們的基礎上修正了作用域的缺陷，讓generator在es5的世界裡自然優雅。我們向facebook脫帽致敬！！egenerator
後記
同步非同步 可以說是整個圈子裡面最喜歡談論的問題，但是，談來談去，似乎絕大多數變成了所謂的『約定俗稱』，大家意味追求新技術的同時，卻並不關心新技術是如何在老技術上傳承發展的，知其然而不知其所以然，人雲亦雲的寫著似是而非的js。
==技術，不應該浮躁==
PS: 最大的功勞不是CO，也不是babel。regenerator的出現比babel早幾個月，而且最初的實現是基於esprima/recast的，關於resprima/recast,國內似乎了解的並不多，其實在babel剛剛誕生之際， esprima/esprima-fb/acron 以及recast/jstransfrom/babel-generator幾大族系圍繞著react產生過一場激烈的斗爭，或許將來的某一天，我會再從實現細節上談一談為什麼babel笑到了最後~~~~
④ 如何在一個類中實現非同步
開個線程池，為每個方法的執行分配一個線程，創建一個hashmap結果集，每個方法執行完，將其存入hashmap中，最後通過判斷hashmap的大小，判斷所有方法線程是否執行完畢，執行完畢則返回該hashmap。
非同步編程其實很常見，特別是在出線Node.js之後，非同步編程更是讓很多開發者受益。那麼回到最初的地方，傳統的前端開發中如何實現非同步編程呢？下面列舉了js實現非同步編程的四種方式。方法一：使用回調函數方法二：事件監聽可以定義一個事件，並為這個事件設定處理函數。這樣只有當這個時間發生的情況下，對應的處理函數才會被執行。方法三：事件的發布/訂閱這個模式在NodeJS以及其他JS框架中都有實現，是一個非常常用的非同步編程方式。
方法四：Promise模式ES6中提供了原生的Promise對象，這個模式最開始只是一個構想，後來由一些框架庫實現。Promise對象代表了未來才會知道結果的事件。Promise的基本思路就是，將需要非同步執行的事件儲存起來，然後根據非同步事件之行後的結果狀態執行下一步的操作。具體的Promise對象的原理和ES6中的使用方法將在下一篇文章中更加深入的進行介紹。
多線程實現。
過程如下
創建一下對象：
robot對象
avi保存對象
行走對象
在robot里使用多線程，2個線程就夠，1個執行avi保存對象，1個執行行走對象。
之所以要創建3個對象，主要是考慮到軟體工程的分而治之的思想。
另外如果你真是要製作機器人的話
可以做2個系統一個是運動控制系統，一個是avi存儲系統，系統間不互聯。這樣互相不會有干擾，而且容易實現，不會讓功能混亂。
⑤ 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如何非同步執行方法
functionmyThread(callback){
returnsetTimeout(1000*10,function(){
$("#div").append("<p>hello</p>");//10秒後在div中加一個行，然後在執行callback函數
callback();
});
}用回調函數
functionA(fun){
vartemp=100;
temp=temp*temp;
window.setTimeout(function(){
fun(temp);
},0);
alert("a函數:"+temp);
}
functionB(r){
alert("b函數"+r);
}
A(B);//調用
⑦ JS中的非同步操作有哪些
JS中的非同步操作：
1、定時器都是非同步操作
2、事件綁定都是非同步操作
3、AJAX中一般我們都採取非同步操作（也可以同步）
4、回調函數可以理解為非同步（不是嚴謹的非同步操作）
⑧ 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);
});
⑨ js非同步問題怎麼解決
非同步載入又叫非阻塞載入，瀏覽器在下載執行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);
})();
<async>屬性是HTML5中新增的非同步支持。此方法被稱為Script DOM Element 方法。Google Analytics 和 Google+ Badge 都使用了這種非同步載入代碼
(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);
})();
但是這種載入方式執行完之前會阻止onload事件的觸發，而現在很多頁面的代碼都在onload時還執行額外的渲染工作，所以還是會阻塞部分頁面的初始化處理。
方法二：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);
}
)();
這種方法只是把插入script的方法放在一個函數裡面，然後放在window的onload方法裡面執行，這樣就解決了阻塞onload事件觸發的問題。
注:DOMContentLoaded與load的區別。前者是在document已經解析完成，頁面中的dom元素可用，但是頁面中的圖片，視頻，音頻等資源未載入完，作用同jQuery中的ready事件；後者的區別在於頁面所有資源全部載入完畢。
方法三：其他方法
由於JavaScript的動態性，還有很多非同步載入方法： XHR Injection、 XHR Eval、 Script In Iframe、 Script defer屬性、 document.write(script tag)。
XHR Injection(XHR 注入)：通過XMLHttpRequest來獲取javascript，然後創建一個script元素插入到DOM結構中。ajax請求成功後設置script.text為請求成功後返回的responseText。
//獲取XMLHttpRequest對象，考慮兼容性。
var getXmlHttp = function(){
var obj;
if (window.XMLHttpRequest)
obj = new XMLHttpRequest();
else
obj = new ActiveXObject("Microsoft.XMLHTTP");
return obj;
};
//採用Http請求get方式;open()方法的第三個參數表示採用非同步(true)還是同步(false)處理
var xmlHttp = getXmlHttp();
xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
xmlHttp.send();
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var script = document.createElement("script");
script.text = xmlHttp.responseText;
document.getElementsByTagName("head")[0].appendChild(script);
}
}
XHR Eval：與XHR Injection對responseText的執行方式不同，直接把responseText放在eval()函數裡面執行。
//獲取XMLHttpRequest對象，考慮兼容性。
var getXmlHttp = function(){
var obj;
if (window.XMLHttpRequest)
obj = new XMLHttpRequest();
else
obj = new ActiveXObject("Microsoft.XMLHTTP");
return obj;
};
//採用Http請求get方式;open()方法的第三個參數表示採用非同步(true)還是同步(false)處理
var xmlHttp = getXmlHttp();
xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
xmlHttp.send();
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
eval(xmlHttp.responseText);
//alert($);//可以彈出$,表明JS已經載入進來。click事件放在其它出會出問題，應該是還沒載入進來
$("#btn1").click(function(){
alert($(this).text());
});
}
}
Script In Irame：在父窗口插入一個iframe元素，然後再iframe中執行載入JS的操作。
var insertJS = function(){alert(2)};
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;//獲取iframe中的window要用contentWindow屬性。
doc.open();
doc.write("<script>var insertJS = function(){};<\/script><body onload='insertJS()'></body>");
doc.close();
GMail Mobile：業內JS內容被注釋，所以不會執行，在需要的時候，獲取script中的text內容去掉注釋，調用eval()執行。
<script type="text/javascript">
/*
var ...
*/
</script>
HTML5新屬性：async和defer屬性
defer屬性：IE4.0就出現。defer屬聲明腳本中將不會有document.write和dom修改。瀏覽器會並行下載其他有defer屬性的script。而不會阻塞頁面後續處理。註：所有的defer腳本必須保證按順序執行的。
<script type="text/javascript" defer></script>
async屬性：HTML5新屬性。腳本將在下載後盡快執行，作用同defer，但是不能保證腳本按順序執行。他們將在onload事件之前完成。
<script type="text/javascript" defer></script>
Firefox 3.6、Opera 10.5、IE 9和最新的Chrome和Safari都支持async屬性。可以同時使用async和defer，這樣IE 4之後的所有IE都支持非同步載入。
沒有async屬性，script將立即獲取（下載）並執行，期間阻塞了瀏覽器的後續處理。如果有async屬性，那麼script將被非同步下載並執行，同時瀏覽器繼續後續的處理。
總結： 對於支持HTML5的瀏覽器，實現JS的非同步載入只需要在script元素中加上async屬性，為了兼容老版本的IE還需加上defer屬性；對於不支持HTML5的瀏覽器(IE可以用defer實現)，可以採用以上幾種方法實現。原理基本上都是向DOM中寫入script或者通過eval函數執行JS代碼，你可以把它放在匿名函數中執行，也可以在onload中執行，也可以通過XHR注入實現，也可以創建一個iframe元素，然後在iframe中執行插入JS代碼。
⑩ 如何通過laypage前端分頁插件實現ajax非同步分頁
本文實例為大家分享了laypage前端分頁插件，ajax非同步分頁，獲取json數據實現無刷新分頁，供大家參考，具體內容如下：
function GetList(pageIndex) {
var _this = ""
var clone_this = "";
_this = $(".BindDataList");//數據列表容器，
clone_this = _this.clone(true);
var pageSize = 25;//每頁展示的條數
$.ajax({
type: "get",
async: false,//非同步鎖定，默認為true
url: "../ashx/System/DefaultAjax.ashx",//後端處理數據，返回json格式
data: {"pageIndex": pageIndex, "pageSize": pageSize, },
contentType: "application/json; charset=utf-8",
success: function (data) {
var json = eval("(" + data + ")");
if (json.PageCount > 0) //數據總條數
{
_this.html("");
for (var i = 0; i < json.rows.length ; i++) {
var html = "<li>json數據</li>";
_this.append(html);
}
jsonpage(json, pageIndex, pageSize);
}
else {
_this.html("");
_this.append("");
}
}
});
}
function jsonpage(json, pageIndex, pageSize) {
var coun = json.PageCount;//總數據條數
var pagecount = coun % pageSize == 0 ? coun / pageSize : coun / pageSize + 1;//計算多少頁
var laypageindex = laypage({
cont: 'project_page', //容器。值支持id名、原生dom對象，jquery對象。
skin: '#fb771f',
pages: pagecount, //通過後台拿到的總頁數
curr: pageIndex, //初始化當前頁
first: '|<', //將首頁顯示為數字1,。若不顯示，設置false即可
last: '>|', //將尾頁顯示為總頁數。若不顯示，設置false即可
prev: '<', //若不顯示，設置false即可
next: '>', //若不顯示，設置false即可
jump: function (obj, first) { //觸發分頁後的回調
if (!first) { //點擊跳頁觸發函數自身，並傳遞當前頁：obj.curr
SearchHotTag(obj.curr);
}
}
});
}