【Ajax】多次異步請求的順序以及回調處理問題

背景

通過搜索框進行檢索:觸發發送檢索請求的事件是keyup,也就是當按完每個鍵之後發送一次檢索請求。

問題

在輸入框輸入內容之後,快速地刪減,有時會發現列表顯示的數據和檢索的關鍵字並不匹配;而緩慢地操作則不存在這個問題
比如輸入“我是中國人”,列表的統計數顯示20W條數據;而“我”,則顯示有30W條數據;而當快速改變輸入框內容時,這兩個關鍵字檢索出來的數據量有時不會和原來保持一致。

分析

通過瀏覽器工具查看發送的請求
在這裏插入圖片描述
我們可以看到第3條請求最先發送,第1條請求最晚發送。而返回時間卻是反過來的,也就是說先請求的數據會在頁面上覆蓋掉後請求的數據,這就導致檢索內容與當前檢索關鍵字不一致。

這是因爲ajax發送的是異步請求,而每次請求的時長不一致,也就是不能保證請求返回順序。

解決

主要分兩種情況:第一種是保證多個不同請求的執行順序;第二種是保證同個請求多次的執行順序。

在網上看了一些文章,這裏列舉下幾個方案

有的人說直接使用ajax的同步模式就好了,我覺得這樣做就失去了ajax的意義了,而且用戶體驗也不好。

第一種情況的解決方法

在ajax的success函數下發起下一個ajax請求,或在complete函數發起一個ajax請求,實現順序調用

第二種情況的解決方法

在前端定義一個全局變量,記錄請求次數的標識符,並把這個標識符帶上傳給後端,在ajax的回調中也返回過來,判斷全局變量的值是否等於該標識符,如果等於就肯定是最後一次發起的請求,然後再渲染頁面。

發佈了113 篇原創文章 · 獲贊 77 · 訪問量 24萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章