具有最大值和最小值的 jQuery 计数器

Question

我正在构建一个计数器，当我按下鼠标时，它应该递增到 maxValue 并且递减不超过 0。我还可以选择将计数器重置为其初始值：0。此外，如果 maxValue 是一个偶数，它应该计数到那个数字。但是，如果 maxValue 是一个奇数，它应该计数到 number-1。

计数器似乎工作正常。但有时它往往会停留在两个值之间。我很确定当我在其中一个按钮上按下鼠标然后立即在另一个按钮上按下鼠标时会发生这种情况。有没有办法防止这种情况发生？我还想知道我的代码是否正确，是否有更简单的方法（可能有循环）？

这里是我的代码：

$(document).ready(function(){
var maxValue = 3;
var count = 0;
// intervals used to regulate how fast the value will change on mousedown
var upInterval;
var downInterval;

$('#counter').html("<p>" + parseInt(count) + "</p>");

$('#up').mousedown(function(){
 // if the maxValue is an even number
 if(maxValue % 2 == 0) {
    upInterval = setInterval(function(){
        if(count < maxValue) {
            count++;
            $('#counter').html("<p>" + parseInt(count) + "</p>");
        }
    },180);
  }
// if it's an odd number, subtract one
 else {
    upInterval = setInterval(function(){
        if(count < maxValue-1) {
            count++;
            $('#counter').html("<p>" + parseInt(count) + "</p>");
        }
    },180);
 }
}).mouseup(function() {
    clearInterval(upInterval);       
}); 

$('#down').mousedown(function(){
    downInterval = setInterval(function(){
        if(count > 0) {
            count--;
            $('#counter').html("<p>" + parseInt(count) + "</p>");
        }
    },180);
}).mouseup(function() {
    clearInterval(downInterval);    
});

    $('#reset').click(function(){
        count = 0;
        $('#counter').html("<p>" + parseInt(count) + "</p>");
    });

});

请记住，间隔是为了调节当我按下鼠标时数字应该以多快的速度变化，并阻止它增加或减少。

这是fiddle

谢谢！

Answer 1

jsBin demo (advanced use-case)

在上面的演示中，我创建了一个可以处理多个元素的用例。它还具有更好的用户体验，因为它使用 setTimeout（而不是间隔），只要您按住它就会逐渐提高计数速度。

jsBin demo

$(document).ready(function(){

  var $counter = $("#counter p"), // Get the 'p' element
      max = 10,
      c   = 0,
      up  = true, // boolean // This will keep track of the clicked up/dn button
      itv; 

  function incDec(){
    c = up ? ++c : --c; // value of `up` is true? increment, else: decrement
    c = Math.min(Math.max(c, 0), max); // dididababaduuuu!
    $counter.text(c);                  // Set current `c` into element
  }

  $('#up, #down').on("mousedown", function(e){   
    up = this.id==="up";           // set to true if button in "up"; else: false
    incDec();                      // Trigger on sligle click
    clearInterval(itv);            // Clear some ongoing intervals
    itv=setInterval(incDec, 180);  // Do every 180 untill..
  }).on("mouseup mouseleave", function(){        //      ..mouseup or mouseleave
    clearInterval(itv); 
  });


  $('#reset').click(function(){
    c = 0;              // Reset to 0
    $counter.text(c);   // Show that "0"           
  }).click();           // Trigger a reset click on DOM ready

});

Answer 2

我只能重现您描述的“卡住”，如果“mouseup”没有发生在元素本身上（例如，当您按下鼠标时将光标移出）。 所以这为我解决了它：

$('#up').mousedown(function(){
    $(window).mouseup(function() {
        clearInterval(upInterval);       
    });

  // if the maxValue is an even number
  ....
});
// and so on