javascript - 尝试为 jQuery AJAX 请求添加延迟

标签 javascript jquery ajax delay onkeyup

我正在尝试延迟 AJAX 请求,以便在输入单元格的 LAST keyup 后 2-3 秒发送它。
到目前为止,我已经设法延迟了请求,但在 2-3 秒后,我收到了针对该字段中的每个 keyup 发送的一个请求...
我怎样才能让 jQuery 取消第一个,只发送最后一个 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);
                }
        }

最佳答案

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

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

        }, 3000);

关于javascript - 尝试为 jQuery AJAX 请求添加延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11308404/

相关文章:

javascript - 如何为 DIV 从中心点移动到屏幕外设置动画?

javascript - 如果类处于事件状态,则更改 div 上的文本

php mysql 基于用户输入表单

javascript - 如何在点击时切换类以动画化 AJAX 页面转换

javascript - 如何在ajax url中传递下拉列表的值

javascript - 在 Kendo UI 中单击自定义工具栏时如何调用函数?

javascript - AngularJS:手动输入时如何验证日期格式(DD/MM/YYYY)

javascript - 如何将媒体查询添加到 Jquery 中

javascript - 在javascript中定向后 Canvas 将图像裁剪为正方形

javascript - Jquery.append() 在类选择器的某个位置