Запускайте событие mousedown каждые 0.2 с, пока мышь не поднимется

Question

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

Упрощенно, мой код JQuery выглядит примерно так:

$('#button').on({
 mousedown : function () {
 var value = $(this).val();
 $(this).val(value + 1);
 },
 mouseup : function () {
 //Some other stuff here
 }
});

Это работает каждый раз, когда пользователь нажимает кнопку.Я хочу, чтобы, если пользователь удерживал кнопку нажатой, событие mousedown срабатывало каждые 0,2 с, пока он не перестал нажимать (и затем сработало событие mouseup).

Я полагаю, что это должно быть как-то сделано с setTimeout ()но я был бы рад, если бы кто-то показал мне, как.Спасибо.

Answer 1

Используйте setInterval и clearInterval:

var interval;
$('#button').on({
  mousedown : function () {
    var el = $(this);
    el.val(parseInt(el.val(), 10) + 1);
    interval = window.setInterval(function(){
      el.val(parseInt(el.val(), 10) + 1);
    }, 200);
  },
  mouseup : function () {
    window.clearInterval(interval);
  }
});

Однако невозможно запускать так часто, как каждые 0,2 мс, я полагаю, вы имеете в виду каждые 0,2 секунды ...

Answer 2

Вы можете использовать setInterval , чтобы повторить событие после кода mousedown

var int = null;
$("#button").mousedown(function() {
  // Start the timer on mousedown
  int = setInterval(function() {
    $("#button").val($("#button").val() + 1);
  }, 2);
}).mouseup(function() {
  // Stop the timer after mouse up
  clearInterval(int);
  int = null;
  // Other code
});

Answer 3

Вы можете достичь этого следующим образом:

$('#button').on({
    mousedown: function () {
        $(this).data('clicked', true);
        var self = this;
        var process = function() {
            if ($(self).data('clicked')) {
                console.log("process...");
                setTimeout(process, 200);
            }
        };
        process();
    },
    mouseup: function () {
        $(this).data('clicked', false);
    }
});