jQuery:使用mousedown事件连续改变输入范围的值

Question

我试图不断改变输入范围的值，直到鼠标按下按钮

code I tried
HTML

<input type="range" id="points" value="50" min="10" max="100" step="1" />
<input type="button" id="plus" value="+" />
<input type="button" id="minus" value="-" />

jQuery

$('#plus').on('mousedown', function() {
  oldvalue = parseInt($('#points').val());
  $('#points').val(oldvalue + 5).change();
  console.log($('#points').val());
  });
$('#minus').on('mousedown', function() {
  oldvalue = parseInt($('#points').val());
  $('#points').val(oldvalue -  5).change();
  console.log($('#points').val());
  });

jsfiddle

使用此代码，输入范围的值只更改一次，但我的要求是不断更改值，直到鼠标下降

提前感谢您的帮助

Answer 1

您需要对重复性质进行编程，因此您可以使用setInterval()来实现这一点，如

$(document).ready(function() {
  function setRepeatedMouseDown(el, callback) {
    var timer;
    $(el).on('mousedown', function() {
      callback();
      timer = setInterval(callback, 500);
    }).on('mouseleave mouseup', function() {
      clearInterval(timer);
    });
  }
  setRepeatedMouseDown('#plus', function() {
    $('#points').val(function(i, val) {
      return +val + 5;
    }).change();
  });
  setRepeatedMouseDown('#minus', function() {
    $('#points').val(function(i, val) {
      return +val - 5;
    }).change();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="points" value="50" min="10" max="100" step="1" />
<input type="button" id="plus" value="+" />
<input type="button" id="minus" value="-" />

Answer 2

你的问题是事件只触发一次…您应该做的是确保(直到事件继续)定期执行您的代码。因此，可以使用setTinterval()函数在"mousedown"事件上启动周期性计时器，并使用clearInterval()函数在"mouseup"事件上停止计时器。在我的例子中，我声明了一个interval"全局"变量。在设置间隔之前，我也只执行了一次函数，否则在点击时它不会被执行。

希望有帮助。

var interval;
$('#plus').on('mousedown', function() {
    startTime(true); // to work on click also
  interval =  setInterval(function(){startTime(true);}, 500);
});
$('#minus').on('mousedown', function() {
    startTime(false); // to work on click also
  interval =  setInterval(function(){startTime(false);}, 500);
});
$('.rangeMover').on('mouseup', function() {
  clearInterval(interval);
});
function startTime(plus) {
    var oldvalue = parseInt($('#points').val());
    if (plus) {
        $('#points').val(oldvalue + 5).change();
    } else {
        $('#points').val(oldvalue -  5).change();
    }
      console.log($('#points').val());
}
<input type="range" id="points" value="50" min="10" max="100" step="1" />
<input type="button" id="plus" class="rangeMover" value="+" />
<input type="button" id="minus" class="rangeMover" value="-" />

也要注意HTML的修改

PS: http://jsfiddle.net/uu9o1vam/