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/

Answer 2

在这里：http://jsfiddle.net/Hxhsh/10/：）

只需添加一个setTimeout

即可

Answer 3

仅use 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);
}

延迟mousedown间隔启动（JQuery / Javascript）

3 个答案: