Onmouseover popup延迟

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 < / strong>但是，由于存在超时，因此在此之后将执行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内部调用的函数将不会被执行。