获取滑块的最后一个值答案

【问题标题】：Getting last value of slider获取滑块的最后一个值
【发布时间】：2020-09-29 05:52:26
【问题描述】：

我正在使用 HTML 滑块 (type="range")。它在到达目标值时更新每个中间值的相关元素。因为是大数据渲染项目，导致应用程序变慢。我希望它只取最后一个值，而不是中间值。

我在一个 React 项目中使用这个元素。我遇到 MaterialUI 有 onChangeCommitted 事件，但我不想使用外部库。

有没有办法模拟这个onChangeCommitted？

【问题讨论】：

到目前为止你尝试了什么？
我尝试了 HTML 的 onDragEnd 事件，但它适用于整个输入元素，而不是元素的滑块。
请访问help center，使用tour查看内容和How to Ask。做一些研究，搜索关于 SO 的相关主题；如果您遇到困难，请发布您尝试的minimal reproducible example，并使用[<>] sn-p 编辑器记录输入和预期输出。
这种方法对你有用吗：stackoverflow.com/questions/22199098/…
@OğuzcanBudumlu 很酷 :) 在这种情况下，您可能只需删除该问题，因为已在其他地方提出并回答了此问题

标签： javascript html reactjs

【解决方案1】：

您可以使用step 属性来提及用户可以增加多少范围值。例如，我们可以将1 作为起始值，100 作为最后一个值，step=100 只允许用户将值从 0 增加到 100。

  <input type="range" id="volume" name="volume"
         min="1" max="100" step="100">
  <label for="volume">Volume</label>

【讨论】：

它不完全符合我的要求。当我减少步数时，中间值仍然会触发渲染。

【解决方案2】：

在不受控制的输入滑块上使用onChange 处理程序来管理去抖动的“昂贵”回调，您可以利用setTimeout 在过期后调用真正的回调。在每次更改事件时重置超时。使用 ref 存储计时器 id。

const [value, setValue] = useState(0);
const timerRef = useRef();

const expensiveCallback = value => {
  console.log('expensiveCallback', value);
  setValue(value); // <-- finally update state, or anything else really
};

const changeHandler = (e) => {
  const { value } = e.target;

  clearTimeout(timerRef.current);
  timerRef.current = setTimeout(() => {
    expensiveCallback(value); // <-- re-enclose latest value
  }, 250); // <-- tune this value to what feels best for you
};

return (
  ...

    <input
      type="range"
      min={0}
      max={1000}
      defaultValue={value} // <-- use default value for uncontrolled input
      onChange={changeHandler}
    />

  ...
);

【讨论】：