javascript间隔防止点击元素（有时）答案

【问题标题】：javascript interval prevents clicking on elements (sometimes)javascript间隔防止点击元素（有时）
【发布时间】：2012-12-07 17:47:23
【问题描述】：

我认为这不一定是间隔错误，但这就是正在发生的事情。

基本上，我为网站的这一部分构建了自己的“谷歌搜索”功能。它将列出一堆票类型项目，搜索功能允许他们像在 Google 中一样搜索票。当您键入时，它会填充您正在执行的搜索。

因此，interval 事件持续运行并调用 AJAX 函数（该函数显然调用了一个 .jsp 文件，该文件运行我编写的基于输入文本搜索数据库的方法），然后将返回的数据拆分并粘贴到网页，你知道的，标准的 AJAX 东西。

但是，当我尝试点击其中一个链接时，它似乎忽略它这就像我必须在某个时间点击它才能让页面注册点击。我可以减慢时间间隔，它可以缓解一些问题，但搜索似乎慢。它仍然偶尔会忽略点击。链接是表格元素内的标准链接。

AJAX 函数 - 我在发回之前格式化了数据（我更喜欢 Java 编码而不是 JavaScript，所以我在那里做而不是 XD）

间隔设置为 500MS。所以它是一次全部替换文本，而不是逐行替换。所以我知道为什么要这样做：/我在使用连续间隔的其他页面上没有这个问题。不过，该页面没有 AJAX 调用。

function getResults(supplier, request, cat, type, displayFiles, input)
{

    var output;
    //Ajax variable
    var xmlhttp;
            //Makes the call to the ajax engine based on browser
            if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }  

            var url = "getResults.jsp?supplier=" + encodeURIComponent(supplier) + "&request= " + encodeURIComponent(request) + "&cat= " + encodeURIComponent(cat) + "&type= " + encodeURIComponent(type)
            + "&displayFiles= " + encodeURIComponent(displayFiles) + "&input= " + encodeURIComponent(input);                        



            xmlhttp.open("POST",url,true);


            //Handling of the ajax call
            xmlhttp.onreadystatechange = function(){
                    if(xmlhttp.readyState == 4){             
                        output = xmlhttp.responseText;
                        //alert(output); //Gives the success or failure of the ajax call            
                        document.getElementById("resultsBox").innerHTML = output;

                    }
                }       

          xmlhttp.send(null); 
}

【问题讨论】：

标签： javascript ajax intervals

【解决方案1】：

所以你有一个由 setInterval 创建的计时器，它每（至少）500 毫秒触发一次搜索方法。

搜索方法是异步的，因此您甚至可以在旧的搜索请求完成之前触发新的搜索请求，这可能会创建对 innerHTML 属性的更新序列（取决于服务器的响应时间）溢出它。因为即使每 500 毫秒触发一次请求，您也不知道响应何时到达。

作为建议，尝试重做逻辑，将 setInterval 替换为 setTimeout（甚至 requestAnimationFrame）以避免“溢出”行为，而不是仅更新整个结果块。

【讨论】：

我可以这样做，但我不确定进行更多检查的含义，因为我不知道该数据库上会同时有多少张票。因此，如果他们获得大量，检查票是否已经显示可能会开始导致一些滞后问题。为了做到这一点，会有很多分裂和比较。我想出了一个解决方法，但你关于为什么这样做的建议似乎是有道理的。当输入框没有焦点时，我只是要杀死间隔。
好像就是这样。如果搜索输入超出某个点（服务器速度较慢），它将开始与搜索重叠（页面不断变化）。有时杀死间隔可以缓解问题。还略微增加了间隔，因为理论上用户永远不会“失去焦点”在搜索框上（使用鼠标滚轮滚动，这样他们就不会真正点击它）。所以，你的解决方案会更干净，但我只剩下一周的时间（我是实习生），只需要让它合理地工作。连同其他东西。遗憾的是，没有时间实施您的解决方案。
除了检查门票是否已经显示之外，您可以做的是保留一个信息，例如列出的最后一个项目的 ID，并仅查询数据库中比该 ID 更早的项目

【解决方案2】：

您可以像我在游戏中那样做。

search() {
    do stuff
    setTimeout(search,500);
}

这就是我在 javascript 中执行连续循环的方式。这样它只是一个循环。 setTimeout 只运行一次它的功能。 setInterval 每隔一段时间运行一次，很容易粗心。使用 setTimeout，您可以让 search() 函数在完成后再次调用它自己。

【讨论】：