5S 循環(huán)調(diào)用一次 AJAX，是一種常見(jiàn)的前端編程技巧，用于實(shí)現(xiàn)在某個(gè)事件觸發(fā)后，調(diào)用一次 AJAX 請(qǐng)求并處理返回結(jié)果。這種技巧的優(yōu)勢(shì)在于簡(jiǎn)潔高效，可以提高網(wǎng)頁(yè)的響應(yīng)速度和用戶體驗(yàn)。下面將通過(guò)幾個(gè)示例來(lái)詳細(xì)講解 5S 循環(huán)調(diào)用一次 AJAX 的使用。

示例 1：
假設(shè)我們有一個(gè)搜索框，用戶輸入關(guān)鍵字后，頁(yè)面會(huì)自動(dòng)展示相關(guān)的搜索結(jié)果。但是用戶在連續(xù)輸入關(guān)鍵字時(shí)，我們并不希望每次輸入都觸發(fā)一次 AJAX 請(qǐng)求。這時(shí)就可以使用 5S 循環(huán)調(diào)用一次 AJAX 的技巧。

var timer;
$('#search-input').on('input', function() {
clearTimeout(timer);
timer = setTimeout(function() {
var keyword = $('#search-input').val();
// 發(fā)起 AJAX 請(qǐng)求并處理返回結(jié)果
$.ajax({
url: '/search',
data: { keyword: keyword },
success: function(data) {
// 處理返回結(jié)果
}
});
}, 500); // 設(shè)置 500ms 的延遲
});

在上面的代碼中，輸入框的 `input` 事件被觸發(fā)時(shí)，會(huì)清除之前的定時(shí)器，并設(shè)置一個(gè)新的 500ms 的定時(shí)器。如果用戶在 500ms 內(nèi)又輸入了新的關(guān)鍵字，定時(shí)器會(huì)被清除并重新設(shè)置。只有當(dāng)用戶停止輸入超過(guò) 500ms 時(shí)，才會(huì)執(zhí)行 AJAX 請(qǐng)求，從而避免不必要的請(qǐng)求。

示例 2：
除了在用戶輸入連續(xù)關(guān)鍵字時(shí)進(jìn)行優(yōu)化外，5S 循環(huán)調(diào)用一次 AJAX 還可以用于防止按鈕重復(fù)提交。比如在提交表單時(shí)，我們希望在上一次提交完成后，用戶再次點(diǎn)擊按鈕時(shí)才觸發(fā) AJAX 請(qǐng)求。

var isSubmitting = false;
$('#submit-btn').on('click', function() {
if (isSubmitting) return;
isSubmitting = true;
// 發(fā)起 AJAX 請(qǐng)求并處理返回結(jié)果
$.ajax({
url: '/submit',
data: $('#my-form').serialize(),
success: function(data) {
// 處理返回結(jié)果
isSubmitting = false;
},
complete: function() {
isSubmitting = false;
}
});
});

在上面的代碼中，我們使用一個(gè)標(biāo)志變量 `isSubmitting` 來(lái)記錄當(dāng)前是否正在提交表單。當(dāng)用戶點(diǎn)擊提交按鈕時(shí)，首先檢查 `isSubmitting` 是否為 `true`，如果是，則說(shuō)明上一次提交還未完成，直接返回。如果不是，則設(shè)置 `isSubmitting` 為 `true`，發(fā)起 AJAX 請(qǐng)求。在請(qǐng)求成功后，如果表單提交完成并返回結(jié)果，或者請(qǐng)求失敗或超時(shí)，`isSubmitting` 都會(huì)被重置為 `false`，這樣用戶才能再次點(diǎn)擊按鈕提交表單。

綜上所述，5S 循環(huán)調(diào)用一次 AJAX 是一種非常有用的前端編程技巧，可以避免不必要的請(qǐng)求和重復(fù)提交，提高用戶體驗(yàn)和頁(yè)面性能。無(wú)論是在搜索自動(dòng)補(bǔ)全還是在表單提交中，都可以靈活運(yùn)用該技巧來(lái)實(shí)現(xiàn)更好的效果。