延遲mousedown間隔啟動（JQuery / Javascript）

Question

我正在編寫一個jQuery插件，按一下按鈕即可操縱輸入字段的值。

到目前為止，我擁有的功能是可以通過單擊按鈕來控制值，並且如果用戶按住按鈕則可以不斷增加它。 簡化后，腳本如下所示：

var element = $('#test-input');
var interval;

$('#test-up-button').on({
    mousedown : function(e) {
        element.val(parseInt(element.val()) + 1);

        //Wait 400ms, than do the interval

        interval = window.setInterval(function() {
            element.val(parseInt(element.val()) + 1);
        }, 200);      
        e.preventDefault();        
    },
    mouseup : function() {
        window.clearInterval(interval);
    }
});

（您還可以在此處查看工作版本： http : //jsfiddle.net/Husar/Hxhsh/#base ）

但是，正如您在注釋中看到的那樣，我還希望當mousedown事件發生時，在值的初始增加之后，將interval函數延遲400ms，然后只執行一次。

按下按鈕后，值變為+ 1，按住按鈕不動，間隔開始滾動。

Answer 1

將setInterval包裝在setTimeout 。 並且，像interval一樣，保留並清除timeout值：

var interval, timeout;

// ...

    timeout = window.setTimeout(function () {
        interval = window.setInterval(function() {
            element.val(parseInt(element.val()) + 1);
        }, 200);      
    }, 400);

// ...

    window.clearTimeout(timeout);
    window.clearInterval(interval);

http://jsfiddle.net/coiscir/jUSg8/

Answer 2

在這里，您可以訪問： http : //jsfiddle.net/Hxhsh/10/ :)

只需添加一個setTimeout

Answer 3

只需使用setTimeout延遲setInterval

mousedown: function(e) {
    setTimeout(function() {
        interval = window.setInterval(function() {
            element.val(parseInt(element.val()) + 1);
        }, 200);
    }, 400);
    e.preventDefault();
},
mouseup: function() {
    window.clearTimeout(timeout);
    window.clearInterval(interval);
}