Onmouseover popup with a delay

Question

On a forum is a user information popup. When you hover over the username, its displaying a popup with the user informations. I have to delay this a bit, because its anoying when always coming popups that fast.

Popup link:

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

There is a file called:

ajax_userinfo.html

There in is on top the popup handling

Show the popup:

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

Hide the popup:

function close_popup() {
      document.getElementById('popup').style.display='none';

      document.getElementById('ajax_avatar').innerHTML = 'loading...';
      document.getElementById('ajax_username').innerHTML = 'loading...';
   }

Popup html:

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

What I tried without success (setTimeout):

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

Thank you

Answer 1

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

And change this:

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

to this:

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

Despite a transition would be way better for such a case.

Also, just a side note: if the user leaves in less than a second (which is possible, of course), you will encounter many errors, because you script will set the .style.display to none BUT, since there is a timeout, the style.display = 'block' will be executed AFTER that, therefore you may encounter further problems due to this delay.

I'm personally highly recommending you to use a different way to insert that kind of delay, a transition is a way easier and efficient solution.

EDIT:

As @Xufox said, you may want to assign the setTimeout to a variable and use clearTimeout on that variable, here is what you should do in that case:

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

In this way, when the close_popup() function is called, the function called inside the setTimeout above won't be executed.