網站製作學習誌

這次在設計購物車時，遇到了以下的介面：

客戶的需求是在按下「 + 」 或「 - 」時，要以 Ajax 發送更新的數量到後端系統去驗算；每按一次「 + 」 或「 - 」，就要送出一次 Ajax Request。

可是這時候問題就來啦，如果數量要 10 個的話就要連續按 10 次「 + 」，也會連續發送 10 次的 Ajax Request ；這樣不但會浪費珍貴的網路頻寬，更不用說會造成後端系統的負擔。

怎麼解決呢？其實方法很多，而這裡我採用最簡單的 setTimeout 和 clearTimeout 。程式如下：

var sending = null;

var _formSubmit = function () {
    alert('Form submited!');
};

var _doAjaxPost = function () {
    if (sending !== null) {
        clearTimeout(sending);
        sending = null;
    }
    sending = setTimeout(_formSubmit, 1000);
};

var plusQuantity = function () {
    // ... 執行增加數量的動作 ...
    _doAjaxPost();
    return false;
};

var minusQuantity = function () {
    // ... 執行減少數量的動作 ...
    _doAjaxPost();
    return false;
};

$(function () {
    // 增加數量
    $('a.plus').click(plusQuantity);

    // 減少數量
    $('a.minus').click(minusQuantity);
});

註：這裡我大量使用了 jQuery 的功能。

想法很簡單，就是當我們按下「 + 」 或「 - 」時，要隔一秒才會送出 Ajax Request ；而在這一秒內如果再次按下「 + 」 或「 - 」，那麼就重新計時。

因此程式的主要重點在 _doAjaxPost 這個函式以及全域變數： sending ；當第一次呼叫 _doAjaxPost 時 sending 還是 null ，這時我們利用 setTimeout 開始計時，並將計時器指定給 sending 這個變數。而當第二次呼叫時， sending 變數已經不為空值，因此我們再利用 clearTimeout 將它清除，並重設為 null 以達到重新計時的目的。

是不是很簡單呢？

如果各位有更好的作法，也歡迎分享~