Question

我试图在用户点击按钮时连续为文本输入字段的值添加+1。

简化，我的JQuery代码是这样的：

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

每次用户点击按钮时都会有效。我想要的是如果用户按下按钮，mousedown事件每隔0.2秒触发一次，直到他停止按下（并且鼠标事件触发）。

我认为这应该以某种方式用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);
    }
});

每0.2秒运行一次mousedown事件，直到鼠标向上

3 个答案: