11.強化加減按鈕

如果點選加號，從1點到99這可能有點累，經過考慮之後，我們有了一個方案。 當按鈕點下去的時候，如果半秒還沒有起來，之後就自動加減了。

提出加減函式

因為加減需要在多處使用，所以把他提取出來。

//負責繫結事件
Quantity.prototype.evt = function () {
    var _this = this;

    _this.addBtn.on('click', function () {
        _this.add();
    });

    _this.cutBtn.on('click', function () {
        _this.cut();
    });
};

//加
Quantity.prototype.add = function (n) {
    var no = this.no + this.tuple;
    if (no <= this.tupleMaxbuy) {
        this.no = no;
        this.numBox.text(this.no);
    }
    this.btnStyle();
    this.msgCtrl();
};

//減
Quantity.prototype.cut = function (n) {
    var no = this.no - this.tuple;
    if (no >= this.tupleMinbuy) {
        this.no = no;
        this.numBox.text(this.no);
    }
    this.btnStyle();
    this.msgCtrl();
};

檢視程式碼：http://jsfiddle.net/gs_jquery/7bb1mc7v/

完成自動加減

當滑鼠按下去的時候自動加減，起來的時候取消。

//負責繫結事件
Quantity.prototype.evt = function () {
    var _this = this,
        timer;

    _this.addBtn
        .on('click', function () {
            _this.add();
        })
        .on('mousedown', function (event) {
            timer = setInterval(function () {
                _this.add();
            }, 200);
        })
        .on('mouseup', function (event) {
            clearInterval(timer);
        });

    _this.cutBtn
        .on('click', function () {
            _this.cut();
        })
        .on('mousedown', function (event) {
            timer = setInterval(function () {
                _this.cut();
            }, 200);
        })
        .on('mouseup', function (event) {
            clearInterval(timer);
        });
};

程式碼：http://jsfiddle.net/gs_jquery/nxvkmbzm/
滑鼠按下去，已經會自動加減了，視乎已經完成了，可是還有問題，使用者只想單擊的時候呢？如果使用者單擊的動作不是那麼快，那就自動加了。

於是就接著改程式碼，我們辦法是一開始的時候用延時。

//負責繫結事件
Quantity.prototype.evt = function () {
    var _this = this,
        timer,
        timerout;

    _this.addBtn
        .on('click', function () {
            _this.add();
        })
        .on('mousedown', function () {
            timerout = setTimeout(function () {
                timer = setInterval(function () {
                    _this.add();
                }, 200);
            }, 500);

        })
        .on('mouseup', function () {
            clearInterval(timer);
            clearTimeout(timerout);
        });

    _this.cutBtn
        .on('click', function () {
            _this.cut();
        })
        .on('mousedown', function () {
            timerout = setTimeout(function () {
                timer = setInterval(function () {
                    _this.cut();
                }, 200);
            }, 500);
        })
        .on('mouseup', function () {
            clearInterval(timer);
            clearTimeout(timerout);
        });
};

加上了段程式碼之後，已經實現了我們想要的功能了。http://jsfiddle.net/gs_jquery/fb4jczwd/