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

Question

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

我的问题：代码有效，但是当我输入字母时，它会在控制台中触发很多XHR请求。 有没有一种方法可以限制在一段时间内触发AJAX POST请求的次数，如果可以，我将如何实现呢？

提前致谢。

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

        }
        });
    });
});

Answer 1

您想用所谓的debounce来包装keyup函数。 这类似于事件限制，但是将确保在执行上一次按键后将调用AJAX请求。

jQuery具有内置的油门/反跳功能。 如果希望最多每200 ms调用一次请求，则可以编写：

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

其中ajaxRequestFn是执行请求的函数， 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);
    });
});