Блог

Как мне запускать функцию JavaScript каждые несколько миллисекунд, пока перетаскивается ввод с диапазоном типов?

В настоящее время я использую изменение, но оно срабатывает только один раз после завершения перетаскивания. Я хочу что-то анимировать, когда происходит перетаскивание…

 range.addEventListener('change', adjustPath, false)
  

Должен ли я делать html-элемент перетаскиваемым?

Используйте "input" событие вместо "change" . Оно должно срабатывать при каждом «тике» во время перетаскивания. Под «галочкой» я подразумеваю изменение в терминах текущей оценки слайдера во время перетаскивания.

Обратите внимание на разницу между первыми двумя входными данными ниже. Первое будет «тикать» намного больше, потому что вдоль ползунка больше значений.

Второе имеет более редкие значения, поэтому вы видите «ввод» только тогда, когда вы на самом деле перетаскиваете таким образом, чтобы приблизиться к следующему значению.

Если вы хотите немного больше контроля, вы также можете подключить прослушиватели перемещения мыши вверх / вниз и добавить дополнительную логику в отношении них. Рассмотрим, как 3-й ползунок будет регистрироваться независимо от того, насколько редки значения.

 function inputHandler() {
  console.log("input");
}

function changeHandler() {
  console.log("change");
}

const r1 = document.getElementById("r1");
r1.addEventListener("input", inputHandler);
r1.addEventListener("change", changeHandler);

const r2 = document.getElementById("r2");
r2.addEventListener("input", inputHandler);
r2.addEventListener("change", changeHandler);

const r3 = document.getElementById("r3");
let down = false;
r3.addEventListener("mousedown", () => {
  down = true;
});
r3.addEventListener("mousemove", () => {
  if (!down) return;
  console.log("mmove");
});
r3.addEventListener("mouseup", () => {
  down = false;
});  

 label {
  display: block;
}  

 <label><span>R1</span> <input id="r1" type="range" min="0" max="100" value="20"></label>
<label><span>R2</span> <input id="r2" type="range" min="0" max="3" value="1"></label>
<label><span>R3</span> <input id="r3" type="range" min="0" max="3" value="1"></label>