Событие onChange для диапазона HTML5

Question

В настоящее время событие onChange на входах моего диапазона срабатывает на каждом шаге.

Есть ли способ остановить запуск этого события до тех пор, пока пользователь не отпустит ползунок?

Iиспользую диапазон для создания поискового запроса.Я хочу иметь возможность запускать поиск каждый раз, когда форма меняется, но выдача запроса на поиск на каждом шаге движения ползунка - это слишком много.

---

Вот код в его нынешнем виде:

HTML:

<div id="page">
    <p>Currently viewing page <span>1</span>.</p>
    <input class="slider" type="range" min="1" max="100" step="1" value="1" name="page" />
</div>

JavaScript:

$(".slider").change(function() {
    $("#query").text($("form").serialize());
});

Это помогает?

Answer 1

Вы можете попробовать использовать событие blur. Конечно, у него есть свои ограничения, но это просто еще одно предложение :)

Вы также можете попытаться объединить события blur, onkeyup и onmouseup, чтобы попытаться поймать различные ситуации: blur, когда пользователь делает выбор с помощью клавиш со стрелками и нажимает <Tab>, onkeyup когда пользователь делает выбор с клавиатуры и остается сфокусированным на ползунке, и onmouseup, когда он использует мышь. Может быть даже возможно объединить только onkeyup и onmouseup.

Тем не менее, вам нужно будет просто проверить, изменилось ли значение или нет, и запустить необходимый код только после того, как изменение произошло.

Answer 2

другое предложение:

$(".slider").change(function(){    
  if (this.sliderTimeour) clearTimeout(this.sliderTimeour);
  this.sliderTimeour = setTimeout(function(){
    //your code here
  },delayTimeHere);
});