Question

我有这样的输入搜索：

<input type="search" autocomplete="off" name="searchSchools" id="searchSchools" value="" onKeyUp="searchSchools(this.value)" />

正如你可以看到的，每次onKeyUp事件被触发时我都会调用一个名为“searchSchools”的函数，在那里我搜索与PHP中输入搜索的当前值匹配的学校并以JSON格式返回它们，问题是如果我快速键入多个请求被发送到PHP页面，我想阻止这种情况，我想发布帖子请求只有在没有其他请求到此功能的同一页面时才会发送到页面。

这是功能：

function searchSchools(name){
    $.post("search-schools.php", { name: name },
    function(data) {
        //-> Here i do whatever with data returned
    }, 
    "json"
    );
}

Answer 1

在$.post中添加延迟。请尝试以下操作，

var timer = null, xhrReq = null;
function searchSchools(name){
    if (timer != null) {
       clearTimeout(timer);
    }

    timer = setTimeout(function () {
        if(xhrReq != null) {
           xhrReq.abort(); //to kill all prev request and take the latest
        }

        xhrReq = $.post("search-schools.php", { name: name },
           function(data) {
              //-> Here i do whatever with data returned
           }, 
           "json"
         );
    }, 1000); //will be posted only after 1 second.
}

修改：添加xhr.abort()以中止任何旧请求，并仅考虑最新的请求。

Answer 2

var request;
function searchSchools(name){
    if (!request) {
       request = $.post("search-schools.php", { name: name },
       function(data) {
           request = false;
           //-> Here i do whatever with data returned
       }, 
       "json"
       );
    }
}

Answer 3

假设您不想要我在OP的第一条评论中指出的行为

我喜欢以更浪费的方式处理这类问题：

var xhr;
function search(term) {
    if (xhr) {
        xhr.abort();
    }

    xhr = $.post(...);
}

这使得基本逻辑更容易处理，因为中止请求的成功回调不会被调用，并且您总是得到关于实际输入的最新结果。

如果您对启动和中止潜在的许多请求持谨慎态度，请在适当的关键事件上引入一个限制器 - 从而实现关注点的分离。

在脚本中给出xhr正确的上下文 - 在此示例中它是全局的。你想避免这种情况。

EDIT1 - 补充道：

xhr永远不会被取消。您可能希望在jQuery AJAX设置对象的complete处理程序中执行此操作。另一方面，在中止或已完成的请求上调用abort()实际上是一个NOP

如何在jquery中同时防止多个帖子同时访问同一页面？

3 个答案: