8

我正在尝试延迟 AJAX 请求，以便在输入单元的最后一次键入后 2-3 秒发送出去。
到目前为止，我已经设法延迟了请求，但是在 2-3 秒后，我为该字段中的每个 keyup 发送了一个请求......
我怎样才能让 jQuery 取消第一个 keyup 而只发送最后一个 keyup？
这是到目前为止的代码： 

$('#lastname').focus(function(){
          $('.terms :input').val(""); //clears other search fields
}).keyup(function(){
    caps(this); //another function that capitalizes the field
    $type = $(this).attr("id"); // just passing the type of desired search to the php file
        setTimeout(function(){ // setting the delay for each keypress
                ajaxSearchRequest($type); //runs the ajax request

        }, 1000);
});

上面的代码等待 1 秒，然后根据按键发送 4-5 个 AJAX 请求。我只想在最后一个之后发送一个keyup
我在 StackOverflow 中找到了一些使用 Javascript 的类似解决方案，但由于我对编程知识的了解，我无法将它们实施到我的项目中。

[已解决] 最终工作代码，感谢@Dr.Molle：

$('#lastname').focus(function(){
          $('.terms :input').val("");
}).keyup(function(){
    caps(this);
    $type = $(this).attr("id");

    window.timer=setTimeout(function(){ // setting the delay for each keypress
            ajaxSearchRequest($type); //runs the ajax request

        }, 3000);

}).keydown(function(){clearTimeout(window.timer);});

这是ajaxSearchRequest代码：

function ajaxSearchRequest($type){
                var ajaxRequest2;  // The variable that makes Ajax possible!

                try{
                  // Opera 8.0+, Firefox, Safari
                  ajaxRequest2 = new XMLHttpRequest();
                }catch (e){
                  // Internet Explorer Browsers
                  try{
                     ajaxRequest2 = new ActiveXObject("Msxml2.XMLHTTP");
                  }catch (e) {
                     try{
                    ajaxRequest2 = new ActiveXObject("Microsoft.XMLHTTP");
                     }catch (e){
                    // Something went wrong
                    alert("Browser error!");
                    return false;
                     }
                  }
                }

                ajaxRequest2.onreadystatechange = function(){
                  if(ajaxRequest2.readyState == 4){

                        $result = ajaxRequest2.responseText;
                        $('#resultcontainer').html($result);

                    }}


                var searchterm = document.getElementById($type).value;


                var queryString ="?searchterm=" + searchterm +"&type=" +$type;


                if(searchterm !== ""){

                ajaxRequest2.open("GET", "searchrequest.php" + 
                                 queryString, true);
                ajaxRequest2.send(null);
                }
        }
4

3 回答 3

17

将超时存储在一个变量中，这样您就可以清除最近的超时：

clearTimeout(window.timer);
window.timer=setTimeout(function(){ // setting the delay for each keypress
                ajaxSearchRequest($type); //runs the ajax request

        }, 3000);
于 2012-07-03T09:59:05.893 回答
3

您正在尝试做的事情称为debounceing。

这是Ben Alman的一个jquery 插件，它可以完成这项工作。

underscore.js也包含此功能。

真的没有必要破解 ajax 请求系统。只要确保它在正确的时刻被调用。

于 2012-07-03T12:33:24.407 回答
-2

我喜欢莫勒的回答但我会进一步提高表现

var ajaxRequest2;  // The variable that makes Ajax possible!
function getAjaxObject()
{
                try{
                  // Opera 8.0+, Firefox, Safari
                  ajaxRequest2 = new XMLHttpRequest();
                }catch (e){
                  // Internet Explorer Browsers
                  try{
                     ajaxRequest2 = new ActiveXObject("Msxml2.XMLHTTP");
                  }catch (e) {
                     try{
                    ajaxRequest2 = new ActiveXObject("Microsoft.XMLHTTP");
                     }catch (e){
                    // Something went wrong
                    alert("Browser error!");
                   // return false;
                     }
                  }
                }
  return ajaxRequest2;


 }
   getAjaxObject();

    function ajaxSearchRequest($type){



               if(typeof ajaxRequest2 =="undefined" || ajaxRequest2 == false)
                {
                  return;
                }
               ajaxRequest2.abort();

                ajaxRequest2.onreadystatechange = function(){
                  if(ajaxRequest2.readyState == 4){

                        $result = ajaxRequest2.responseText;
                        $('#resultcontainer').html($result);

                    }}


                var searchterm = document.getElementById($type).value;


                var queryString ="?searchterm=" + searchterm +"&type=" +$type;


                if(searchterm !== ""){

                ajaxRequest2.open("GET", "searchrequest.php" + 
                                 queryString, true);
                ajaxRequest2.send(null);
                }
        }

此更改将中止正在进行的 ajax 请求并发送新请求。当你

输入-> 等待 4 秒 -> 请求已发送 -> 再次输入（未收到响应）-> 等待 4 秒-> 另一个请求触发

于 2012-07-03T10:04:52.713 回答