javascript - 鼠标悬停弹出时有延迟

Question

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

弹出链接:

$_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内部调用的函数就不会被执行。