JavaScriptでマウスホイールイベントで入力フィールドを検証する際の問題

Question

JavascriptのNumber Inputフィールドを検証しようとしています。

問題は、値を変更するためにマウスホイールを使用すると、正しく検証できないという問題です。

現在の値が5で、マウスホイールでスクロールすると、現在の値が6ではなく5として表示されます。マウスイベントがイベントの開始時にトリガーされているようです。したがって、それはまだ古い価値を持っています。 https://jsfiddle.net/3o8g7cdy/1/

このcorrecltyのために検証する方法上の任意のアイデアを：jsfiddleする

<label>Choose an ice cream flavor: 
    <input type="number"> 
    <p></p> 
</label> 
<script> 
var inputc = document.querySelector('input'); 
var pc = document.querySelector('p'); 
inputc.addEventListener('wheel', function (e){ 
    pc.innerText = 'The value is ' + inputc.value; 
}); 
</script> 

リンク。ありがとう。

Answer 1

wheelの代わりにinputイベントを聞くことができます。

var inputc = document.querySelector('input'); 
 
var pc = document.querySelector('p'); 
 
inputc.addEventListener('input', function (e){ 
 
    pc.innerText = 'The value is ' + inputc.value; 
 
});

<label>Choose an ice cream flavor: 
 
    <input type="number"> 
 
    <p></p> 
 
</label>

追加情報：それでもホイールイベントを使用する場合は、変更操作を評価するためにいくつかの遅延を追加することができます。 Even setTimeout（function（）{}、0）でも問題は解決します。 How?

<label>Choose an ice cream flavor: 
    <input type="number"> 
    <p></p> 
</label> 
<script> 
var inputc = document.querySelector('input'); 
var pc = document.querySelector('p'); 
inputc.addEventListener('wheel', function (e){ 
setTimeout(function(){ pc.innerText = 'The value is ' + inputc.value;},0); 
}); 
</script>