jQuery无法实时同步获取range输入框滑动变化值的解决方法

jQuery 中绑定在表单元素上的change事件，只会在用户完成交互操作时触发。
range滑块场景下，示例代码里的console.log( $(this).val())仅会在滑块拖动停止、失焦确认值的时候执行打印，无法在值变化的过程中实时拿到当前结果，原有演示代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" min="0" value="100" max="600">

$("input").on("change", function(event){
  console.log( $(this).val())
});

直接监听input事件即可。
这个事件是原生表单事件，只要输入控件的值发生变更就会立即触发，不管是鼠标拖动滑块、键盘方向键调整数值，都会实时同步返回当前值，完全不需要等待交互结束，兼容性覆盖所有主流浏览器。
你只需要把原来绑定的事件名从change替换成input就能实现需求：

$("input").on("input", function(event){
  // 滑块拖动过程中会逐次触发，实时打印当前值
  console.log( $(this).val())
});

补充说明：

• 高频拖动滑块场景下，如果回调逻辑包含重计算、DOM重绘等耗时操作，可以自行添加节流函数优化性能
• 如果需要兼容IE9及以下版本的老旧浏览器，可以额外绑定propertychange事件做兜底，绝大多数现代项目不需要额外处理
• 该实时监听逻辑对所有输入类表单控件通用，包括文本输入框、下拉选择框等都可以用同样方式实现值变更的实时响应

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