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

Delay mousedown interval start (JQuery / Javascript)

本文关键字：JQuery Javascript 启动 mousedown 延迟      更新时间：2023-09-26

我正在编写一个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，按住按钮一点，然后间隔开始滚动。

将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/

开始：http://jsfiddle.net/Hxhsh/10/：）

只需添加一个setTimeout

只需使用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);
}
相关文章：