0

我有这样的输入搜索：

<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"
    );
}
4

3 回答 3

3

添加延迟$.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()以中止任何旧请求并仅考虑最新的..

于 2012-05-21T18:30:15.203 回答
0 
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"
       );
    }
}
于 2012-05-21T18:31:51.723 回答
0

假设您不希望我在对 OP 的第一条评论中指出的行为

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

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

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

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

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

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

EDIT1 - 添加：

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

于 2012-05-21T18:43:16.670 回答