欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決js ajax同步請求造成瀏覽器假死的問題

 更新時間:2018年01月18日 15:17:52   作者:來自潘大大  
下面小編就為大家分享一篇解決js ajax同步請求造成瀏覽器假死的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

一、問題的起因

今天做一個需求遇到了這么個情況,就是用戶個人中心有個功能,點擊按鈕,可以刷新用戶當前的積分,這個肯定需要使用到ajax的同步請求了,當時喀喀喀三下五除二寫玩了,大概代碼如下:

/**
  * 異步當前用戶積分 by zgw 20161216
  * @return {[type]} [description]
 */
 function flushIntegralSum() {
     //點擊按鈕刷新前修改按鈕的文案,已經去掉點擊事情,防止多次點擊
  $("#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;
   }
  });
 }

本以為這么簡單的功能喀喀喀隨便寫寫就沒事了,在運行的時候出現(xiàn)了問題,當用戶點擊刷新積分按鈕時,文案沒有修改為"正在刷新",但是ajax請求發(fā)送了,于是我查看網頁代碼,發(fā)現(xiàn)js其實把文案和html元素綁定的onclick事件去掉了,在請求成功后有變回原來的了,但是頁面上邊文案沒有改變,當時很奇怪,不知道為什么html代碼里邊改變了,頁面卻沒有變點變化

二、了解問題原因

問題的根源:當時我進行了排查,最后發(fā)現(xiàn)是 "async:false" 的問題,換成異步的就沒有問題了,那為什么同步請求會產生代碼失效的問題呢?

原因:瀏覽器的渲染(UI)線程和js線程是互斥的,在執(zhí)行js耗時操作時,頁面渲染會被阻塞掉。當我們執(zhí)行異步ajax的時候沒有問題,但當設置為同步請求時,其他的動作(ajax函數(shù)后面的代碼,還有渲染線程)都會停止下來。即使我的DOM操作語句是在發(fā)起請求的前一句,這個同步請求也會“迅速”將UI線程阻塞,不給它執(zhí)行的時間。這就是代碼失效的原因。

三、解決問題

1.我當時使用了 setTimeout 來解決,把ajax代碼放在sestTimeout中,讓瀏覽器重啟一個線程來操作,這樣就解決問題了,代碼如下:

function flushIntegralSum() {
     //點擊按鈕刷新前修改按鈕的文案,已經去掉點擊事情,防止多次點擊
  $("#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的第二個參數(shù)設為0,瀏覽器會在一個已設的最小時間后執(zhí)行

到這里問題就解決了,但是你可以試試當你點擊按鈕的時候如果需要彈出一個gif圖片,并且圖片一直在旋轉,提示更新中,你會發(fā)現(xiàn)圖片雖然會顯示,但是圖片卻是不動的,那是因為雖然同步請求延遲執(zhí)行了,但是它執(zhí)行期間還是會把UI線程給阻塞。這個阻塞相當牛逼,連gif圖片都不動了,看起來像一張靜態(tài)圖片一樣。結論很明顯,setTimeout治標不治本,相當于把同步請求“稍稍”異步了一下,接下來還是會進入同步的噩夢,阻塞線程,這種方法只適合發(fā)請求之前操作簡單的時間短的情況

2.使用 Deferred 來解決

以上這篇解決js ajax同步請求造成瀏覽器假死的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

  • Javascript原生ajax請求代碼實例

    Javascript原生ajax請求代碼實例

    這篇文章主要介紹了Javascript原生ajax請求代碼實例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-02-02
  • JavaScript Date對象使用總結

    JavaScript Date對象使用總結

    js 日期對象的一些方法總結
    2009-05-05
  • 帶你使用webpack快速構建web項目的方法

    帶你使用webpack快速構建web項目的方法

    這篇文章主要介紹了帶你使用webpack快速構建web項目的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-11-11
  • 基于iscroll.js實現(xiàn)下拉刷新和上拉加載效果

    基于iscroll.js實現(xiàn)下拉刷新和上拉加載效果

    這篇文章主要為大家詳細介紹了基于iscroll.js實現(xiàn)下拉刷新和上拉加載效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • 非jQuery實現(xiàn)照片散落桌子上,單擊放大的LightBox效果

    非jQuery實現(xiàn)照片散落桌子上,單擊放大的LightBox效果

    本文給大家介紹一款js實現(xiàn)的照片散落桌子上點擊放大圖片的LightBox效果,非常的炫酷,而且是非jQuery實現(xiàn)的,有需要的小伙伴可以參考下
    2014-11-11
  • 原生js實現(xiàn)密碼強度驗證功能

    原生js實現(xiàn)密碼強度驗證功能

    這篇文章主要為大家詳細介紹了原生js實現(xiàn)密碼強度驗證功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-03-03
  • 解決typescript?提示?Object?is?possibly'null'的N種方案

    解決typescript?提示?Object?is?possibly'null'的N種方案

    這篇文章主要介紹了typescript?提示?Object?is?possibly?‘null‘?的N種解決方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-03-03
  • JS刷新框架外頁面七種實現(xiàn)代碼

    JS刷新框架外頁面七種實現(xiàn)代碼

    JS刷新框架想必大家們都有所了解,如何是刷新框架外頁面想必大家有所陌生啦,沒關系本文的出現(xiàn)將解決大家的燃眉之急,感興趣的你可不要錯過了哈
    2013-02-02
  • layUI的驗證碼功能及校驗實例

    layUI的驗證碼功能及校驗實例

    今天小編就為大家分享一篇layUI的驗證碼功能及校驗實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • 解決微信內置瀏覽器返回上一頁強制刷新問題方法

    解決微信內置瀏覽器返回上一頁強制刷新問題方法

    微信內置瀏覽器在返回上一頁面,且上一頁面包含AJAX代碼時,頁面就會被強制刷新,極度影響用戶體驗。而我們想要的效果是:返回上一頁面時,頁面還停留在原來的狀態(tài),AJAX獲取到的數(shù)據(jù)還在,滾動條也在原來的位置。下面跟著小編一起來看下吧
    2017-02-02

最新評論