jquery - 如何在运行 AJAX 调用之前完成 jQuery 事件

Question

语境

在我的网站上，用户可以进入“搜索用户”页面，在那里他们可以搜索任何用户的用户名，这将使用户名在 id 的 div 中弹出#here。当用户在输入字段中按下 id 键时，#search页面上的当前用户名将被删除（$("#here").html('')是用于删除用户名的代码），然后该函数应该运行，如下所示：

$("#search").keyup(function() { //when user inputs value into search bar

    offset = 0; //when the user scrolls to the bottom of the page, more usernames are called in. Whenever the user inputs a new value, I reset the offset so that its value doesn't pile up over time.

    var x = $(this).val();
    $("#here").html(''); //empty previous usernames
    searchUsers(x); //get users

});

这是获取用户名的函数：

function searchUsers(x) {

    $.ajax({
        type: 'GET',
        url: 'includes/suggestUsers.php',
        dataType: 'json',
        data: 'q='+x+'&offset='+offset,
        success: function(data) {

            data.forEach(function(item) {

                if (item.error == undefined) {

                    let newContent = 
                    "<div class='user-links-container'>"+
                        "<div class='userImgContainer'>"+
                            "<img src='images/"+item.image+"'>"+
                        "</div>"+
                        "<a href='userProfiles.php?user="+item.uidUsers+"&id="+item.idUsers+"' class='userLinks'>"+item.uidUsers+"</a>"+
                    "</div>"+
                    "<br>";

                    let appended = $(newContent).appendTo("#here");

                }

            });

        }
    });

}

问题

在执行下一个 AJAX 调用之前，我无法删除 div 的 HTML 内容。在我的本地服务器上，这个功能基本上可以正常工作。但是在我的实时网站上，服务器要慢得多，所以最终发生的事情是，当用户键入非常快时，每次用户按键时都会返回一定数量的用户名，但以前的用户名不是首先清除。

因此，如果我的网站上只有一个用户名为“person”的用户，当您在输入字段中键入“p”时，用户名“person”会出现。然后，当您键入“e”以获取“pe”时，应从输出用户名的 div 中删除原始用户名“person”。但是，问题是原始用户名没有被删除，现在显示了两个完全相同的用户名。当您输入整个用户名“p、e、r、s、o、n”时，这会导致在用户名中的六个字符中显示六个相同的用户名，而我只想显示一个；每次输入文本后都应清除 HTML，以便仅保留最近的输入。当我非常缓慢地走时，div 清除得很好，但除此之外，此链接可在我的网站上检查问题）。

问题

有没有办法从事件中创建一个链，以便在函数运行之前始终清除 HTML？我已经尝试过使用 Promise，但它不起作用；出现同样的问题：

$("#here").html('').promise().done(function() {

    searchUsers(x); //get users

}); 

我也尝试过使用回调函数，但它不起作用：

$("#here").html('', searchUsers(x));

我还尝试将$("#here").html()代码放在 AJAX 成功回调本身中。虽然这有效地清除了以前的用户名，但问题是当用户滚动到页面底部时，我也在使用该searchUsers(x)函数来获取更多用户名结果，所以我不想清除当前的用户名当用户滚动时列出。这是滚动代码：

$(window).scroll(function() {

    if ($(window).scrollTop() + $(window).height() == $(document).height()) {

        var usernames = $("#here .user-links-container").length;
        //console.log(usernames);
        if (usernames >= 15) {

            offset = offset + 15;

            var text = $("#search").val();
            searchUsers(text);

        }

    }

});

我之前有两个单独的函数：一个调用原始用户名（searchUsers()），另一个在滚动后获取用户名（searchMoreUsers()），但我将其减少为一个（仅searchUsers()），因为我认为这样更有效，并且有两个函数似乎没有必要。但是，这可能是潜在解决此问题的最佳选择。感谢任何解决这个问题的人。让我知道任何想法。

标签： jqueryajax