Ajax 多次異步請求分析

  • 現(xiàn)象

    鼠標滑過列表發(fā)出請求是掰,在頁面上顯示請求結果。鼠標一次性滑過多個列表項辱匿,發(fā)出多個請求键痛,請求返回結果有時間查導致頁面顯示出現(xiàn)閃爍。

  • 影響

    頁面顯示閃爍匾七,視覺顯示不好看絮短,交互不友好

  • 解決方法

    • 取消之前的請求響應

      在ajax請求未響應之前可以使用 xhr.abort() 取消,但如果發(fā)出的請求已經(jīng)到達了服務器昨忆,這種終止只是讓瀏覽器不在監(jiān)聽這個請求的響應丁频,服務器端仍然會進行處理。使用 abort() 取消后會進入 error 回調(diào)函數(shù)

      // 定義請求對象
      var getCategoryInfoAjax = null;
      function getCategoryInfo() {
          if (getCategoryInfoAjax) {
              // 不為 null 說明之前請求過,需要取消請求
              getCategoryInfoAjax.abort();
          }
          getCategoryInfoAjax = $.ajax({
              type: "POST",
              contentType: "application/x-www-form-urlencoded;charset=utf-8",
              url: url,
              data: param,
              success: function (result, testStatus) {
                  // 也可以在這里判斷 ajax 請求是否存在來決定是否執(zhí)行回調(diào)函數(shù)
              },
              complete: function (xhr, xs) {
                  xhr = null;
              },
              error: function (xmlHttpRequest, textStatus, errorThrown) {
                  if (xmlHttpRequest.statusText === 'abort') {
                      // 說明是主動中斷席里,不作出提示
                  } else {
                      layer.msg('失敗');
                  }
              }
          });
      
      }
      

      缺點:使用封裝好的 ajax 方法叔磷,如果出現(xiàn)需要多個請求同時進行的情況,那么使用 abort() 取消請求會使其他請求終止奖磁。

      優(yōu)點:重復多次請求的情況下改基,我們可以拋棄之前所有的請求響應,獲得最后一次的請求響應咖为。

    • 忽略之前的所有請求寥裂,保留最新一次的請求

      創(chuàng)建計數(shù)器,利用閉包技術來判斷是否當前的ajax請求與響應返回是同一批次的案疲。

      // 定義計數(shù)器
      var xhrCount = 0;
      function getCategoryInfo() {
          var seqNum = ++xhrCount;
          getCategoryInfoAjax = $.ajax({
              type: "POST",
              contentType: "application/x-www-form-urlencoded;charset=utf-8",
              url: url,
              data: param,
              success: function (result, testStatus) {
                  if (seqNum === xhrCount) {
                      // 請求和響應屬于同一批次的
                  } else {
                      // 不相等說明請求和響應不是同一批次
                  }
              },
              complete: function (xhr, xs) {
                  xhr = null;
              },
              error: function (xmlHttpRequest, textStatus, errorThrown) {
                  layer.msg('失敗');
              }
          });
      
      }
      
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末封恰,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子褐啡,更是在濱河造成了極大的恐慌诺舔,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,692評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件备畦,死亡現(xiàn)場離奇詭異低飒,居然都是意外死亡,警方通過查閱死者的電腦和手機懂盐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,482評論 3 392
  • 文/潘曉璐 我一進店門褥赊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人莉恼,你說我怎么就攤上這事拌喉。” “怎么了俐银?”我有些...
    開封第一講書人閱讀 162,995評論 0 353
  • 文/不壞的土叔 我叫張陵尿背,是天一觀的道長。 經(jīng)常有香客問我捶惜,道長田藐,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,223評論 1 292
  • 正文 為了忘掉前任吱七,我火速辦了婚禮汽久,結果婚禮上,老公的妹妹穿的比我還像新娘踊餐。我一直安慰自己景醇,他們只是感情好,可當我...
    茶點故事閱讀 67,245評論 6 388
  • 文/花漫 我一把揭開白布市袖。 她就那樣靜靜地躺著啡直,像睡著了一般烁涌。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上酒觅,一...
    開封第一講書人閱讀 51,208評論 1 299
  • 那天撮执,我揣著相機與錄音,去河邊找鬼舷丹。 笑死抒钱,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的颜凯。 我是一名探鬼主播谋币,決...
    沈念sama閱讀 40,091評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼症概!你這毒婦竟也來了蕾额?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,929評論 0 274
  • 序言:老撾萬榮一對情侶失蹤彼城,失蹤者是張志新(化名)和其女友劉穎诅蝶,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體募壕,經(jīng)...
    沈念sama閱讀 45,346評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡调炬,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,570評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了舱馅。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片缰泡。...
    茶點故事閱讀 39,739評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖代嗤,靈堂內(nèi)的尸體忽然破棺而出棘钞,到底是詐尸還是另有隱情,我是刑警寧澤资溃,帶...
    沈念sama閱讀 35,437評論 5 344
  • 正文 年R本政府宣布武翎,位于F島的核電站,受9級特大地震影響溶锭,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜符隙,卻給世界環(huán)境...
    茶點故事閱讀 41,037評論 3 326
  • 文/蒙蒙 一趴捅、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧霹疫,春花似錦拱绑、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,677評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽膀藐。三九已至,卻和暖如春红省,著一層夾襖步出監(jiān)牢的瞬間额各,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,833評論 1 269
  • 我被黑心中介騙來泰國打工吧恃, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留虾啦,地道東北人。 一個月前我還...
    沈念sama閱讀 47,760評論 2 369
  • 正文 我出身青樓痕寓,卻偏偏與公主長得像傲醉,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子呻率,可洞房花燭夜當晚...
    茶點故事閱讀 44,647評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 第一章 入門 基本功能:訪問和操作 dom 元素硬毕,控制頁面樣式,對頁面的事件處理礼仗,與ajax完美結合吐咳,有豐富的插件...
    X_Arts閱讀 1,045評論 0 2
  • Php代碼 收藏代碼 ajax通過 HTTP 請求加載遠程數(shù)據(jù)。jQuery 底層 AJAX 實現(xiàn)藐守。簡單易用的高...
    Yumazhiyao閱讀 928評論 0 4
  • (重要知識點) 通過 HTTP 請求加載遠程數(shù)據(jù)挪丢。(優(yōu)點:比較方便使用) jQuery 底層 AJAX 實現(xiàn)。簡單...
    吃西瓜的的小青年閱讀 527評論 0 0
  • jQuery 發(fā)送的所有 Ajax 請求卢厂,內(nèi)部都會通過調(diào)用 $.ajax()函數(shù)來實現(xiàn)乾蓬。通常沒有必要直接調(diào)用這個函...
    滾石_c2a6閱讀 3,389評論 0 0
  • $.ajax()方法參數(shù)詳解 1.url:要求為String類型的參數(shù),(默認為當前頁地址)發(fā)送請求的地址慎恒。 2....
    韓小強閱讀 736評論 0 1