如何在按下和按下按钮时连续增加

Question

能否请您看一下此摘要，让我知道单击并按下index时如何连续增加#adder？

var index = 0;
$("#adder").on("click", function(){
  ++index;
   $("#res").html(index);
});

$("#adder").on("keydown", function(){
  ++index;
   $("#res").html(index);
});

$("#adder").on("keypress", function(){
  ++index;
   $("#res").html(index);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <button type="button" class="btn btn-default" id="adder">+</button>
 <div id="res"> </div>

Answer 1

以下是使用mousedown和mouseup事件处理程序并使用setInterval进行连续添加索引的示例。

已编辑

恢复了单击事件处理程序，该处理程序使单击后索引立即增加。

已编辑

添加限制条件

var index = 0;
var interval;
var timeout;

// $("#adder").on("click", function(){
//  increase();
// });

$("#adder").on("mousedown", function(){
  increase();
  timeout = setTimeout(function(){
    interval = setInterval(function(){
      increase();
    }, 100);
  }, 500);
});

$("#adder").on("mouseup", function(){
  clearTimeout(timeout);
  clearInterval(interval);
});

function increase(){
    $("#res").html(++index);
    checkLimit();
}

function checkLimit(){
                   
    // here to check stop increasment
    if(index >= 50 ){
      // stop interval
      clearInterval(interval);
      // remove event handler
      $("#adder").off('click').off('mousedown').off('mouseup');
      return;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <button type="button" class="btn btn-default" id="adder">+</button>
 <div id="res"> </div>