关于input range取值优化：setInterval(50ms)是否存在性能问题？

嘿，其实你不用在这两个方案里纠结——HTML5的input事件就是专门解决这个问题的！先给你拆解下三种方式的利弊：

• .change()事件
  这个方案的优势是完全没性能负担，因为它只在用户松开滑块或者控件失去焦点时触发一次。但缺点也很明显，就是没法实时反馈滑块的当前值，用户体验不够流畅，尤其是在需要即时看到数值变化的场景下，这个方案就不太合适了。

• setInterval轮询
  虽然能实现实时更新，但确实存在你担心的性能问题：不管滑块有没有在动，定时器都会每隔50ms就去读取一次值，属于无意义的资源消耗。而且间隔时间也很难平衡——设短了更耗性能，设长了又会出现数值滞后的情况，完全是得不偿失的方案。

• input事件（强烈推荐）
  这是浏览器为range这类交互式控件原生提供的事件，它会在滑块拖动过程中持续触发，完美契合你实时显示数值的需求：

  • 性能友好：只有当滑块的实际值发生变化时才会触发回调，没有多余的无效执行
  • 体验流畅：数值显示和滑块位置完全同步，不会有延迟

给你个简单的代码示例：

// 获取range控件和显示数值的元素
const slider = document.querySelector('input[type="range"]');
const valueBox = document.getElementById('slider-value');

// 绑定input事件
slider.addEventListener('input', function() {
  valueBox.textContent = this.value;
});

总结一下：如果需要实时显示滑块数值，input事件是绝对的最优解，既兼顾了用户体验又没有性能隐患；如果不需要实时反馈，input事件也能兼容change事件的场景；至于setInterval的方案，完全不推荐使用，属于用复杂手段解决了一个原生事件就能搞定的问题。

内容的提问来源于stack exchange，提问作者Stefan Pakic