在onchange结束时触发输入类型范围的事件

Question

如何触发事件或检测输入类型范围的onchange事件的结束。

$('.slider').on('change',function(e){
      console.log(e.target.value);
});

现在，当我开始拖动范围输入时，这将返回许多控制台日志。 我想在onc​​hange事件结束时获取值。 怎么做到这一点？

谢谢 ;）

Answer 1

嘿Gururaj你可以尝试debounce功能。 它会延迟事件处理程序的触发，因此您可以根据需要在onchange事件结束时获取输入值。 Lodash具有您可以使用的去抖功能。

$range.on('change', _.debounce(function() {
  $display.text($(this).val());
}, 250));

这是给你的一个小演示 。

Answer 2

你可以使用像这样的mousedown和mouseup

 var prevValue = 0; $('.slider').on('change',function(e){ }); // mouse down to check for previous value $('.slider').on('mousedown',function(e){ prevValue = $(this).val(); }); // mouse up when the mouse up from the slider with end value $('.slider').on('mouseup' , function(){ var ThisValue = $(this).val(); if(ThisValue !== prevValue){ // check new value with previous value alert('Value Changed'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input class="slider" type="range" min="0" max="100"/> 

对于上面使用mouseup和mousedown事件的完整答案作为例子，如果你需要将之前的值与新值进行比较，就像JYoThI所说我认为在变化事件上足以得到范围的最后一个值

如果您需要实时更新div值，可以使用input事件的附加信息

工作演示

 $('.slider').on('change',function(e){ console.log($(this).val()); }); //update sliderCount div with real time value $('.slider').on('input',function(e){ $('.sliderCount').text($(this).val()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input class="slider" type="range" value="50" min="0" max="100"/> <div class="sliderCount">50</div>