延迟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事件发生时,在值初始增加之后,间隔函数将延迟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/