Question

我正在向用户输入<input>元素的服务器发送ajax请求，如下所示：

$('#my-input').bind("input", function(event){
   // here's the ajax request
});

困扰我的是它在每个用户的密钥上发送了不必要的许多请求，这意味着如果用户输入非常快，则会有许多不必要的请求。所以我认为应该有一定的延迟/超时，等待一段时间（50毫秒？）让用户在发送ajax请求之前停止输入。那将是一个解决的问题。

但是在发送另一个请求之前第一个ajax请求尚未完成的情况呢？（键入60 ms / char，而ajax请求需要300 ms）。

解决此问题的最佳方法是什么（基于思想和代码）？

Answer 1

您可以在下划线库中使用throttle功能。正如其文档所述：

创建并返回传递函数的新的受限制版本，当重复调用时，每隔等待毫秒最多只调用一次原始函数。对于速度限制事件非常有用，这些事件的发生速度比您能跟上的速度要快。

即使您不想引入新库，您仍然可以从source code了解此函数的工作原理。实际上，throttle函数的简单版本可以是：

function throttle(func, delay) {
    var timeout = null;
    return function() {
        var that = this, args = arguments;
        clearTimeout(timer);
        timeout = setTimeout(function() {
            func.apply(that, args);
        }, delay);
    };
}

这个jQuery throttle-debounce plugin也很有帮助。特别是，根据作者的说法，debounce函数似乎比throttle函数更适合您的需求：

对于将触发AJAX请求的事件上的处理程序执行速率限制，去抖可能特别有用

Answer 2

您可以使用setTimeout函数。经常看看文本是否没有改变，如果没有改变，则相应处理。

setTimeout(function() {
      // Do something after 1 second
}, 1000);

Answer 3

您可以在ajax请求中设置async：false，这样只有在第一个ajax请求完成后才会处理第二个ajax调用。

Answer 4

我会选择@HuiZeng's answer，但以防您需要稍加修改的版本。

步骤

使用您可以清除的setTimeout收听keydown。
当它触发时，检查您是否有队列中的先前请求，如果是，则中止并启动新请求

示例：

var inputTimer = 0, req;

function onInput(e){
      clearTimeout(inputTImer);
      inputTimer = setTimeout( function(){
           // You have access to e here
           // Cancel any previous requests
           req && req.abort();
           req = $.ajax({/*...Do your magic here :)*/})
      }, 100)
 }

在键盘输入上发送jQuery ajax请求

4 个答案: