javascript - 限制 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 函数。这类似于事件限制，但将确保在执行最后一次 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);
    };
};