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

【问题标题】：Executing ajax code after a few seconds of inactivity from the user在用户几秒钟不活动后执行 ajax 代码
【发布时间】：2009-08-05 19:27:09
【问题描述】：

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

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

例如，如果我输入名称“Wendy”，则搜索字符串“W”（我输入的第一个字符）的搜索结果甚至都不会显示。然后将显示字母“W”的搜索结果，然后显示“我们”等等，即使我已经输入了全名并且只想查看“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';
     }
}

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

【问题讨论】：

标签： javascript ajax delay delayed-execution

【解决方案1】：

尝试以下步骤：

每隔几毫秒，检查一下文本框是否有新数据。
如果文本框有新文本，请执行您的 Ajax，并将文本复制到变量中（以便在步骤 1 中进行比较）。

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

此外，您的 SQL 查询是否最佳？好像查询时间太长了。如果您进行单面搜索（即like input+'%'）而不是双面搜索（即like '%' + input + '%'），那么您可以将一些非常好的索引放在桌面上来帮助您。

【讨论】：