鼠标悬停弹出窗口，但有延迟

Onmouseover popup with a delay

本文关键字：延迟 窗口 悬停 鼠标      更新时间：2023-09-26

论坛上有一个用户信息弹出窗口。当您将鼠标悬停在用户名上时，它会显示一个包含用户信息的弹出窗口。我必须稍微延迟一下，因为当总是那么快弹出时，它会厌倦。

弹出链接： 

$_uinfo_profile = '<a href="{PROFILE_URL}" onmouseover="show_popup(' . $user_id . ')" onmouseout="close_popup()">{USERNAME}</a>';

有一个名为：

ajax_userinfo.html

顶部有弹出窗口处理

显示弹出窗口：

       function show_popup(UserID) {
      if(http_getuser) {
         document.getElementById('popup').style.display='block'; sendRequest(UserID);
      }
   }

隐藏弹出窗口：

function close_popup() {
      document.getElementById('popup').style.display='none';
      document.getElementById('ajax_avatar').innerHTML = 'loading...';
      document.getElementById('ajax_username').innerHTML = 'loading...';
   }

弹出的网页：

<div id="popup"> Related popup stuff </div>

我尝试过但没有成功（设置超时）：

 $_uinfo_profile = '<a href="{PROFILE_URL}" setTimeout(onmouseover="show_popup(' . $user_id . '),1000)" onmouseout="close_popup()">{USERNAME}</a>';

谢谢

function show_popup(UserID) {
   if(http_getuser) {
         setTimeout(function(){ 
             document.getElementById('popup').style.display='block';
             sendRequest(UserID);
          }, 1000);
      }
}

并更改此内容：

$_uinfo_profile = '<a href="{PROFILE_URL}" setTimeout(onmouseover="show_popup(' . $user_id . '),1000)" onmouseout="close_popup()">{USERNAME}</a>';

对此：

$_uinfo_profile = '<a href="{PROFILE_URL}" onmouseover="show_popup(' . $user_id . ')" onmouseout="close_popup()">{USERNAME}</a>';

尽管在这种情况下进行过渡会更好。

另外，只是一个旁注：如果用户在不到一秒钟的时间内离开（当然这是可能的），您会遇到许多错误，因为您的脚本会将 .style.display 设置为 none 但是，由于有超时，style.display = 'block' 将在此之后执行，因此您可能会因这种延迟而遇到进一步的问题。

我个人强烈建议您使用不同的方式来插入这种延迟，过渡是一种更简单有效的解决方案。

编辑：

正如@Xufox所说，您可能希望将 setTimeout 分配给一个变量并在该变量上使用 clearTimeout，在这种情况下您应该执行以下操作：

var timeout;
function show_popup(UserID) {
   if(http_getuser) {
         timeout = setTimeout(function(){ 
             document.getElementById('popup').style.display='block';
             sendRequest(UserID);
          }, 1000);
      }
}
function close_popup() {
      clearTimeout(timeout);
      document.getElementById('popup').style.display='none';
      document.getElementById('ajax_avatar').innerHTML = 'loading...';
      document.getElementById('ajax_username').innerHTML = 'loading...';
   }

这样，当调用 close_popup（） 函数时，不会执行在上面的 setTimeout 中调用的函数。

相关文章：