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

Question

我是新来的，所以请对我宽容一些。 这有点令人困惑。 :)

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

例如，如果我输入名称“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 调用时停用计时器。

Answer 2

嘿，谢谢你的回答。
我最终设置了 500 毫秒的时间间隔，其中 JavaScript 函数将连续检查是否在 500 毫秒的时间段内在搜索字符串中输入了新字符。 如果是，将调用搜索函数来搜索用户输入的字符串。 否则，它会再等待 500 毫秒，直到用户停止输入。 最后，它与您的提议非常相似。
再次感谢！

Answer 3

或者，您可以在项目上放置一个“onkeypress”事件处理程序，以清除某些全局变量或取消计时器以防止 AJAX 事件触发。 我知道 Prototype 通过它的就地编辑器和“频率”选项为您实现了这一点。 （我相信它设置了一个超时计时器，每次按键后都会取消该计时器。）

Answer 4

我知道这是一个老问题，但对于其他人来说，我认为你的处理方式是错误的。 我认为你应该为每个 ajax 调用添加日期/时间戳，并跟踪 javascript 中的数据时间戳。 然后，当返回 ajax 调用时，您可以检查日期/时间戳并确保它是最近一次 ajax 调用的结果集。 通过这种方式，您可以立即对每次击键进行 ajax 调用，但仅当 ajax 结果赶上键入时才显示结果。

另外，您是否发送了所有匹配结果？ 仅仅字母 W 就相当于数千个？ 为了加快 javascript 的速度，您可能应该对数据库中的结果进行排名，并仅返回前 10-20 名。 无论如何，他们不想看到超过 10-20 个结果。

此外，您的 SQL 查询是否最优？ 看来查询花费的时间太长了。 如果您进行单面搜索（即 like input+'%'）而不是双面搜索（即 like '%' + input + '%' ）然后您可以放置​​一些非常好的索引来帮助您。