我有一個文本字段，當用戶鍵入時，AJAX 請求被發送到服務器以執行搜索并返回結果：<input type="text" class="form-control player-list-control-text" id="name" name="name" autocomplete="off" />$('.player-list-control-text').keyup(function(){ get_player_list();});function get_player_list(){ $.ajax({ url: '/player/list/get', data: { 'club_id' : $('#club_id').val(), 'position_id' : $('#position_id').val(), 'name' : $('#name').val(), 'page' : players_page, 'sort_by' : sort_by, 'sort_order' : sort_order, }, type: 'POST', success: function(result) { if(result.hasOwnProperty('error')) show_msg('error', result.error); else load_players(result); }, error: function (response) { handle_error(response); } });}問題是，搜索需要一兩秒的時間來執行，所以當用戶快速輸入，比如 5 個字符時，請求會變得混亂，要么需要很長時間，要么顯示錯誤的結果 - 例如， 4 字母搜索的結果，而不是 5 字母搜索的結果。我可以通過在客戶端上保存請求時間或防止用戶在處理前一個請求時輸入來確保顯示最后一個請求的結果，但這兩種解決方案似乎都是不好的解決方案——第一個是因為它實際上并沒有為服務器節省任何麻煩，第二次為糟糕的用戶體驗。我真正在尋找的是一種在客戶端發送新的 5 字母搜索查詢時中斷服務器上過時的 4 字母搜索中間執行的方法。這可能嗎？我該怎么辦？后端腳本包含多個查詢，因為如果這完全相關，我們必須搜索多個表。編輯：關于引發密切投票的類似問題，解決方案不是我所追求的。我想中斷服務器端處理，而不僅僅是停止客戶端上的請求。
2 回答
呼如林
TA貢獻1798條經驗 獲得超3個贊
使用去抖動
lodash的去抖動，而不是自己從頭開始編寫。
const debouncedGetPlayerList = _.debounce(get_player_list, 2000);
$('.player-list-control-text').keyup(function(){
debouncedGetPlayerList(); // execute get_player_list after 2s non-interupted
});
現場示例：https ://codepen.io/dcorb/pen/mVGVOL
$(document).ready(function(){
var $statusKey = $('.status-key');
var $statusAjax = $('.status-ajax');
var intervalId;
// Fake ajax request. Just for demo
function make_ajax_request(e){
var that = this;
$statusAjax.html('That\'s enough waiting. Making now the ajax request');
intervalId = setTimeout(function(){
$statusKey.html('Type here. I will detect when you stop typing');
$statusAjax.html('');
$(that).val(''); // empty field
},2000);
}
// Event handlers to show information when events are being emitted
$('.autocomplete')
.on('keydown', function (){
$statusKey.html('Waiting for more keystrokes... ');
clearInterval(intervalId);
})
// Display when the ajax request will happen (after user stops typing)
// Exagerated value of 1.2 seconds for demo purposes, but in a real example would be better from 50ms to 200ms
$('.autocomplete').on('keydown',
_.debounce(make_ajax_request, 1300));
});
body {
background: #444444;
color: white;
font: 15px/1.51 system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
margin:0 auto;
max-width:800px;
padding:20px;
}
form {
display: inline-block;
padding: 0;
margin: 0;
padding: 5px;
margin: 5px 0 0 0;
}
input {
padding:8px 20px;
border-radius: 2px;
border:0;
font-size:20px;
}
.status-key,
.status-ajax {
margin:10px 0;
}
.status-ajax {
color:#99FF7E;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<form>
<div class="status-key">Type here. I will detect when you stop typing</div>
<input type="text" class="autocomplete">
<div class="status-ajax"></div>
</form>
哆啦的時光機
TA貢獻1779條經驗 獲得超6個贊
延遲請求直到用戶完成輸入
var timer;
$('.player-list-control-text').keyup(function(){
clearTimeout(timer);
timer = setTimeout(function () {get_player_list();}, 500);
});
500ms 為您節省了很多無用的搜索輸入請求。
- 2 回答
- 0 關注
- 120 瀏覽
添加回答
舉報
0/150
提交
取消