带有延迟的鼠标悬停弹出窗口

Question

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

弹出link:

$_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...';
   }

弹出html:

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

我试过没有成功（setTimeout）：

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

谢谢

Answer 1

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里面调用的函数就不会执行了

带有延迟的鼠标悬停弹出窗口

Onmouseover popup with a delay

javascript

ajax

jquery

onmouseover