Задержка начала интервала mousedown (JQuery / Javascript) - PullRequest
1 голос
/ 02 апреля 2012

Я пишу плагин 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, после начального увеличения значения, функция интервала должна быть отложена на 400 мсек, и только для выполнения.

Так что, когда вы нажимаете кнопку, значение становится равным + 1, вы удерживаете кнопку немного, и затем интервалы начинают катиться.

Ответы [ 3 ]

6 голосов
/ 02 апреля 2012

Оберните 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/

2 голосов
/ 02 апреля 2012

Вот, пожалуйста, http://jsfiddle.net/Hxhsh/10/:)

Просто добавьте setTimeout

1 голос
/ 02 апреля 2012

просто используйте 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);
}
...