实现 AJAX 队列的方法答案

【问题标题】：Approach to implementing an AJAX queue实现 AJAX 队列的方法
【发布时间】：2014-01-13 06:41:33
【问题描述】：

jQuery 2.0.3

我想在编辑输入控件中的数据更改时触发 AJAX 调用。我意识到我可以通过 onChange 事件做到这一点。但是，如果用户输入： 123 我不想触发 AJAX 3 次。

相反，我想等待一个“设置期”，然后启动呼叫。每次控制更改时都会重置设置周期。因此，当我快速输入 123 时，我的想法是过了一段时间（稳定），然后我进行了 AJAX 调用。

有人对如何用 jQuery 实现这个有什么建议吗？有没有我可以在 jQuery 中使用的构造来做到这一点？

【问题讨论】：

标签： javascript ajax jquery queue

【解决方案1】：

您需要通过超时限制事件

$('input').on('keyup', function() {
    var self = this;

    clearTimeout( $(this).data('timer') );

    $(this).data('timer', 
        setTimeout(function() {
            $.ajax({
                url  : 'someurl.php',
                data : self.value
            });
        }, 500)
    )
})

【讨论】：

【解决方案2】：

简单的方法是在更改事件上使用 setTimeout / clearTimeout：

var timeout = null;
$('input').bind('keyup blur', function() {
    if (timeout !== null) clearTimeout(timeout);
    timeout = setTimeout(function() {

        // Make your ajax request here

    }, 300);
});

将 300 更改为您希望在发出 ajax 请求之前必须等待的毫秒数。

【讨论】：

change 事件“在用户模糊输入并且自上次聚焦后文本已更改时触发。” (source) 它不会触发任何关键事件。 Demo
@Trojan - 谢谢，你是对的 - 只是在我的脑海中输入了它并且我的想法不对。更新为绑定到模糊和键位事件。
另外，你需要将setTimeout的结果赋值给timeout，否则它永远不会从null改变。
再次感谢 - 我应该在发帖前多测试一下我的答案。