javascript - 取消 XMLHttpRequest？

Question

祝你有美好的一天

我有一个网站，其中有很多“工具提示”。这些工具提示是在将鼠标悬停在文本的特定部分上时创建的。工具提示是一个 div block ，它显示在网站上所有其他内容的顶部，并且当光标从文本移开时被删除。现在，仅当文本具有 <a rel> 时才会生成此工具提示。与“工具提示”类。工具提示使用 XMLHttpRequest 和 rel 标签从 MySQL 数据库获取数据。这一切都运行得很好，但我有一个小问题。 Tooltip.php 是从 MySQL 获取数据的主脚本(8,809 行)，有时需要一段时间才能响应。例如，如果我只是在网站上快速移动光标，并且光标意外地在带有 <a rel> 的文本上悬停了 0.05 秒。文本，即使我的光标不再位于文本上，它也会生成一个工具提示。我想要某种检查来检查光标是否仍然在相同的 <a rel> 上创建实际工具提示之前的文本。

HTML:

<a href="#" rel="1" onmouseover="createTooltip(event);" onmousemove="moveTooltip(event);" onmouseout="removeTooltip();" class="tooltip">A tooltip</a>

Javascript:

   function createTooltip(event)
   {
      var target = event.target || event.srcElement;
      var str = target.rel || target.parentNode.rel; 
      if (str === "" || !str)
      {  
         return;
      }

      if (window.XMLHttpRequest)
      {
         xmlhttp = new XMLHttpRequest();
      }
      else // for older IE clients
      {
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }

      xmlhttp.onreadystatechange = function()
      {
         if (xmlhttp.readyState==4 && xmlhttp.status==200)
         {
            var link = document.getElementsByClassName('tooltip');
            var oldTooltip = document.getElementsByClassName('object-tooltip'); // removing possible old tooltips...
            for (var k = 0; k < oldTooltip.length; k++)
            {
               if (oldTooltip[k])
               {
                  oldTooltip[k].remove();
               }
            }

            for (var i = 0; i < link.length; i++)
            {
               if (str == link[i].rel)
               {
                  var tooltip = document.createElement("div");
                  tooltip.setAttribute('class', 'object-tooltip');
                  tooltip.style.border = "solid 1px black";
                  tooltip.style.color = "white"; //"#99CC00";
                  tooltip.style.position = "fixed";
                  tooltip.style.width = "300px";
                  tooltip.style.left = event.clientX + 'px';
                  tooltip.style.top = event.clientY + 'px';
                  tooltip.style.padding = "5px 10px 5px 10px";
                  tooltip.style.margin = "-25px 0 0 60px";
                  tooltip.style.backgroundColor = "#0E0E0F";
                  tooltip.style.opacity = "0.9";
                  tooltip.style.display = "inline-block";
                  tooltip.style.zIndex = "100000";
                  tooltip.style.textDecoration = "none";
                  tooltip.style.textAlign = "left";
                  tooltip.innerHTML = xmlhttp.responseText;

                  link[i].parentNode.insertBefore(tooltip, link[i].nextSibling);
               }  
            }
         }
      };
      xmlhttp.open("GET", "./armory/tooltip.php?s="+str, true);
      xmlhttp.send();
   }

   function moveTooltip(event)
   {
      var tooltip = document.getElementsByClassName('object-tooltip');
      for (var i = 0; i < tooltip.length; i++)
      {
         tooltip[i].style.left = event.clientX + 'px';
         tooltip[i].style.top = event.clientY + 'px';
      }
   }

   function removeTooltip()
   {
      var tooltip = document.getElementsByClassName('object-tooltip'); // you can have only one tooltip active at time
      for (var i = 0; i < tooltip.length; i++)
      {
         tooltip[i].remove();
      }
   }

为了节省您的时间，我不会分享 tooltip.php。它只获取 rel 属性并使用该属性搜索 MySQL 数据库并打印回数据。在创建工具提示之前，是否可以检查光标是否仍在同一文本上？

致以诚挚的问候

Answer 1

Welp，根据您当前的代码，您需要在现有 createTooltip 函数范围之外添加一个变量，以将 xhr 请求绑定(bind)到(我们称之为 xmlhttp)与您现有的代码保持一致

var xmlhttp; //not in a function

现在在 .tooltip 类上添加 mouseout 函数的事件监听器，然后中止 xhr 请求。

document.querySelectorAll('.tooltip').addEventListener('mouseout', function(){
    xmlhttp.abort();
});

现在，当带有 .tooltip 的元素触发 mouseleave 时，不必要的 xmlhttprequests 将被中止。