今天做一個(gè)需求遇到了這么個(gè)情況，就是用戶個(gè)人中心有個(gè)功能，點(diǎn)擊按鈕，可以刷新用戶當(dāng)前的積分，這個(gè)肯定需要使用到ajax的同步請(qǐng)求了，當(dāng)時(shí)喀喀喀三下五除二寫玩了，大概代碼如下：
/** * 異步當(dāng)前用戶積分 by zgw 20161216 * @return {[type]} [description] */ function flushIntegralSum() { //點(diǎn)擊按鈕刷新前修改按鈕的文案，已經(jīng)去掉點(diǎn)擊事情，防止多次點(diǎn)擊 $("#flushbutton").replaceWith('<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="flushbutton">正在刷新</a>'); $.ajax({ url:'URL', type:'post', async:false, // data:{}, success:function(json){ json = eval('('+json+')'); if(json.url){window.location.href=json.url;return;} $("#flushbutton").replaceWith('<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="flushFreeSum();" id="flushbutton">刷新積分</a>'); if(json.code!=1){ alert(json.msg); }else{ $("#free_sum").html(json.free_sum); } return; } }); }本以為這么簡(jiǎn)單的功能喀喀喀隨便寫寫就沒事了，在運(yùn)行的時(shí)候出現(xiàn)了問題，當(dāng)用戶點(diǎn)擊刷新積分按鈕時(shí)，文案沒有修改為"正在刷新",但是ajax請(qǐng)求發(fā)送了，于是我查看網(wǎng)頁(yè)代碼，發(fā)現(xiàn)js其實(shí)把文案和html元素綁定的onclick事件去掉了，在請(qǐng)求成功后有變回原來(lái)的了，但是頁(yè)面上邊文案沒有改變，當(dāng)時(shí)很奇怪，不知道為什么html代碼里邊改變了，頁(yè)面卻沒有變點(diǎn)變化
二、了解問題原因
問題的根源：當(dāng)時(shí)我進(jìn)行了排查，最后發(fā)現(xiàn)是 "async:false" 的問題，換成異步的就沒有問題了，那為什么同步請(qǐng)求會(huì)產(chǎn)生代碼失效的問題呢？
原因：瀏覽器的渲染(UI)線程和js線程是互斥的，在執(zhí)行js耗時(shí)操作時(shí)，頁(yè)面渲染會(huì)被阻塞掉。當(dāng)我們執(zhí)行異步ajax的時(shí)候沒有問題，但當(dāng)設(shè)置為同步請(qǐng)求時(shí)，其他的動(dòng)作（ajax函數(shù)后面的代碼，還有渲染線程）都會(huì)停止下來(lái)。即使我的DOM操作語(yǔ)句是在發(fā)起請(qǐng)求的前一句，這個(gè)同步請(qǐng)求也會(huì)“迅速”將UI線程阻塞，不給它執(zhí)行的時(shí)間。這就是代碼失效的原因。
三、解決問題
1.我當(dāng)時(shí)使用了 setTimeout 來(lái)解決，把a(bǔ)jax代碼放在sestTimeout中，讓瀏覽器重啟一個(gè)線程來(lái)操作，這樣就解決問題了，代碼如下：
function flushIntegralSum() { //點(diǎn)擊按鈕刷新前修改按鈕的文案，已經(jīng)去掉點(diǎn)擊事情，防止多次點(diǎn)擊 $("#flushbutton").replaceWith('<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="flushbutton">正在刷新</a>'); setTimeout(function(){ $.ajax({ url:'URL', type:'post', async:false, // data:{}, success:function(json){ json = eval('('+json+')'); if(json.url){window.location.href=json.url;return;} $("#flushbutton").replaceWith('<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="flushFreeSum();" id="flushbutton">刷新積分</a>'); if(json.code!=1){ alert(json.msg); }else{ $("#free_sum").html(json.free_sum); } return; } }); },0) }setTimeout的第二個(gè)參數(shù)設(shè)為0，瀏覽器會(huì)在一個(gè)已設(shè)的最小時(shí)間后執(zhí)行
到這里問題就解決了，但是你可以試試當(dāng)你點(diǎn)擊按鈕的時(shí)候如果需要彈出一個(gè)gif圖片，并且圖片一直在旋轉(zhuǎn)，提示更新中，你會(huì)發(fā)現(xiàn)圖片雖然會(huì)顯示，但是圖片卻是不動(dòng)的，那是因?yàn)殡m然同步請(qǐng)求延遲執(zhí)行了，但是它執(zhí)行期間還是會(huì)把UI線程給阻塞。這個(gè)阻塞相當(dāng)牛逼，連gif圖片都不動(dòng)了，看起來(lái)像一張靜態(tài)圖片一樣。結(jié)論很明顯，setTimeout治標(biāo)不治本，相當(dāng)于把同步請(qǐng)求“稍稍”異步了一下，接下來(lái)還是會(huì)進(jìn)入同步的噩夢(mèng)，阻塞線程，這種方法只適合發(fā)請(qǐng)求之前操作簡(jiǎn)單的時(shí)間短的情況
2.使用 Deferred 來(lái)解決
jQuery在1.5版本之后，引入了Deferred對(duì)象，提供的很方便的廣義異步機(jī)制。
function getData3(){ var defer = $.Deferred(); $.ajax({ url : 'p.php', //async : false, success: function(data){ defer.resolve(data) } }); return defer.promise();} $('.btn3').click(function(){ $('.loadingicon').show(); $.when(getData3()).done(function(data){ $('.loadingicon').hide(); alert(data); });});可以看到我在ajax請(qǐng)求中去掉了async:false，也就是說(shuō)，這個(gè)請(qǐng)求又是異步的了。另外請(qǐng)注意success函數(shù)中的這一句：defer.resolve(data)，Deferred對(duì)象的resolve方法可傳入一個(gè)參數(shù)，任意類型。這個(gè)參數(shù)可以在done方法中拿到，所以我們異步請(qǐng)求來(lái)的數(shù)據(jù)就可以以這樣的方式來(lái)返回了。
至此，問題得到了解決。Deferred對(duì)象如此強(qiáng)大且方便，我們可以好好利用它。
<button class="btn1">async:false</button><button class="btn2">setTimeout</button><button class="btn3">deferred</button> <img class="loadingicon" style="position:fixed;left:50%;top:50%;margin-left:-16px;margin-top:-16px;display:none;" src="loading2.gif" alt="正在加載" /><script> function getData1(){ var result; $.ajax({ url : 'p.php', async : false, success: function(data){ result = data; } }); return result; } $('.btn1').click(function(){ $('.loadingicon').show(); var data = getData1(); $('.loadingicon').hide(); alert(data); }); $('.btn2').click(function(){ $('.loadingicon').show(); setTimeout(function(){ $.ajax({ url : 'p.php', async : false, success: function(data){ $('.loadingicon').hide(); alert(data); } }); }, 0); }); function getData3(){ var defer = $.Deferred(); $.ajax({ url : 'p.php', //async : false, success: function(data){ defer.resolve(data) } }); return defer.promise(); } $('.btn3').click(function(){ $('.loadingicon').show(); $.when(getData3()).done(function(data){ $('.loadingicon').hide(); alert(data); }); });</script>以上這篇jQuery Ajax async=>false異步改為同步時(shí),解決導(dǎo)致瀏覽器假死的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
