Question

我编写了一个简单的函数，在一定的时间间隔后向服务器发送请求。

var initialTimer;

$('.cart').on('keyup change', 'input', function () {

        if (initialTimer) {
            clearTimeout(initialTimer);
        }

        initialTimer = setTimeout(function () {
           $.ajax({
                    url: "https://httpbin.org/get",
                    type: 'GET',
                }).done(function (response) {
                    alert(response.url);
                }).fail(function (response) {
                    console.log(response);
                }).always(function () {
                    console.log('request ended.');
                });
        }, 500);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cart">
  <input type="number" name="quantity">
</div>

此代码适用于Firefox但不适用于Chrome。使用输入框递增/递减时，它在Chrome中不起作用，但如果我在输入框内输入数字，则无效。

Answer 1

您没有显示HTML，但此代码适用于Chrome：

var initialTimer;
$('.cart').on('keyup', function () {

    if (initialTimer) {
        clearTimeout(initialTimer);
    }

    initialTimer = setTimeout(function () {
       console.log('test');
       // Send AJAX request to server
    }, 1000);

});

https://jsfiddle.net/dcjh47fs/

Answer 2

看起来jQuery签名不正确。试试这个：

$('.cart').on('keyup', function () {
    ...
});

clearTimeout无法使用chrome

2 个答案: