Question

我构建了一个链接到PHP脚本的HTML输入字段。当在域中输入用户名时，它会在下面的jQuery / AJAX的帮助下从数据库中搜索用户名而不刷新页面。

我的问题： 代码有效，但是当我输入一个字母时，它会在控制台中发出大量的XHR请求。有没有办法限制AJAX POST请求在一段时间内被触发的次数，如果是这样，我将如何实现这一目标？

提前致谢。

<form action="validate.php" id="form" method="POST">

Answer 1

您希望使用所谓的debounce包装您的keyup函数。这类似于事件限制，但将确保在执行最后一个keyup后调用AJAX请求。

jQuery内置油门/去抖动。如果您希望最多每200毫秒调用一次请求，则可以写：

$("#username").keyup(debounce(ajaxRequestFn, 200);

其中ajaxRequestFn是执行请求的函数，例如debounce实现：

// func       callback function
// wait       throttle time in ms
// immediate  bool, should callback be called on first event
function debounce(func, wait, immediate) {
    var timeout;
    return function () {
        var context = this, args = arguments;
        var later = function () {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

Answer 2

使用超时并在每个密钥中清除它：

$(document).ready(function(){
    var myTimeout;
    $('#username').keyup(function(){
        clearTimeout(myTimeout);
        var username = $('#username').val();
        myTimeout = setTimeout(function() {
            $.ajax({
                type:"POST",
                url:"guild_find.php",
                data:{username:username},
                success:function(res){
                    $('#userslist').html(res);  
                }
            });
        }, 1000);
    });
});

限制Keyup上的AJAX请求触发的次数

2 个答案: