Question

我正在构建一个计数器，该计数器应该增加到 maxValue ，并在我mousedown时减少不超过 0 。我还可以选择将计数器重置为初始值： 0 。此外，如果maxValue是偶数，它应计入该数字。但是，如果maxValue是奇数，则它应该计数到数字-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>");
    });

});

请记住，间隔是为了调节我在mousedown时数量应该改变的速度并阻止它递增或递减。

这是fiddle

谢谢！

Answer 1

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

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

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

Answer 2

<强> 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

});

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

2 个答案: