javascript - 如何检测快速的 .change() 事件？

Question

我有以下内容:

$(document).ready(function () {
    var timer;    
    $('.coInput').on('change', function () {
        var itemID = $(this).attr('data-id');
        var rate = $(this).val();
        var $this = $(this);
        $this.prop('disabled', true);
        clearTimeout(timer);
        timer = setTimeout(function() {
            $.ajax({
                url: '/update_crackout/',
                type: 'POST',
                dataType: 'json',
                data: {
                    'object': itemID,
                    'rate': rate
                },
                success: function(data) {
                    $('#weight-'+itemID).html(data.weight);
                    $('#price-'+itemID).html(data.price);
                    $this.prop('disabled', false);
                }
            })
        }, 500)
    })
});

它似乎并不能始终如一地工作。它指向一个数字字段。当我使用向上/向下箭头更改值时，它第一次起作用，然后仅间歇性地起作用。是什么导致 .change() 错过我的一些更改？

我尝试删除除单个 console.log() 之外的所有内容，它做了同样的事情。

Answer 1

根据MDN :

The change event is fired for <input>, <select>, and <textarea> elements when a change to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each change to an element's value.

_{(emphasis mine)}

因此，如果您需要在每次更改时触发该事件，请使用“input”事件。

这是一个代码笔来显示它的工作原理:https://codepen.io/Nisargshah02/pen/BJPYoY

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="number" name="" id="">