javascript - 在用户不活动几秒钟后执行 ajax 代码

Question

我是新来的，所以请放轻松。这有点令人困惑。 :)

我正在处理一个搜索输入，其中用户在搜索文本框中输入另一个用户的姓名(或姓名的一部分)，然后返回与该搜索字符串匹配的用户列表。问题是当涉及数万用户时，它有点慢。由于这种缓慢，当用户在搜索输入中快速输入名称时，屏幕将开始闪烁每次击键的搜索结果(在用户已经输入搜索字符串之后)。这就像一个严重延迟的 react 。

例如，如果我输入名称“Wendy”，搜索字符串“W”(我输入的第一个字符)的搜索结果甚至不会显示。然后将显示字母“W”的搜索结果，然后是“We”等等，即使我已经输入了全名并且只想查看“Wendy”的结果。

我想做的是仅当用户在一段时间内(我想是两秒钟)没有输入任何内容时才执行搜索。否则，将显示“正在搜索”字样。 Javascript 方法的代码如下。请注意，该代码目前可用于搜索用户，我只需要实现延迟执行。

function updateSearchResults() {
    if($F('searchString').length > 0){
        Element.update($('searchResultsScrollBox'), '<h3>Searching...</h3>'); 
        $('searching').style.display = 'block';
        var url = '<c:url value='ajaxFrontGetUsers.html'/>';
        var ajax = new Ajax.Updater({success: 'searchResults'}, url,
        {method: 'post', parameters: $('searchForm').serialize(true)});
         $('searching').style.display = 'none';
     }
}

我希望这一切都有意义。提前感谢任何可以提供帮助的人。

Answer 1

尝试以下步骤:

1. 每隔几毫秒，检查文本框中是否有新数据。
2. 如果文本框有新文本，执行您的 Ajax，并将文本复制到变量(用于在步骤 1 中进行比较)。

如果您想从那里提高性能，请在用户键入内容时激活计时器，并在进行 Ajax 调用时停用它。