使HTML滑块在值快速改变时不跳过值

Question

我正在使用滑块，当我将滑块从一侧快速移动到另一侧时，它会跳过中间的一些值。我怎样才能使滑动条通过滑动条中的每个值递增，而不是在滑动条之间跳过数字?

Answer 1

这里有一个选项，演示如何使用所有的between值，而不是skip和values…问题是，当你让js计算所有的中间值时，它将很难保持相同的速度。

const range = document.querySelector("input[type='range']");
let lastVal = range.value;
range.addEventListener("input", (e) => {
const newVal = e.target.value;
if ( 
newVal == lastVal + 1 ||
newVal == lastVal - 1
) {
console.log(newVal);
lastVal = newVal;
return;
}
if ( newVal > lastVal ) {
while ( newVal > lastVal ) {
lastVal++;
console.log(lastVal);
}
return;
}
if ( newVal < lastVal ) {
while ( newVal < lastVal ) {
lastVal--;
console.log(lastVal);
}
return;
}
});

<input type="range" min="0" max="100" />

Answer 2

所以，在没有代码示例的情况下，我假设您将一个事件处理程序绑定到您的滑块元素，您拖动它，并且该事件处理程序在某些onmousemove类型的事件上执行。

你可以尝试的是-将所有事件推入堆栈，并从它弹出，直到它在某些setInterval中为空。这种方法不会是反应性的，但它不会跳过mousemove事件。