Question

I have some links like as shown below, here is a jsfiddle link to it.

What I want ?

I want the jquery methods to be fired only when the mouse over is more than 3 seconds. I know I have to use setTimeout but I am not able to understand how to use it.

If anyone can help me by editing my fiddle link

HTML CODE

<ul>
     <li>
          <a onmouseout="RemoveDetails(this)" onmouseover="GetSomeDetail('Sachin (actor)', this)" onclick="Suggestion('Sachin (actor)');" class="link">Sachin (actor)</a>
     </li>
     <li>
          <a onmouseout="RemoveDetails(this)" onmouseover="GetSomeDetail('Sachin Dev Burman', this)" onclick="Suggestion('Sachin Dev Burman');" class="link">Sachin Dev Burman</a>
     </li>
     <li>
          <a onmouseout="RemoveDetails(this)" onmouseover="GetSomeDetail('Sachin Pilot', this)" onclick="Suggestion('Sachin Pilot');" class="link">Sachin Pilot</a>
     </li>
     <li>
          <a onmouseout="RemoveDetails(this)" onmouseover="GetSomeDetail('Sachin Rana', this)" onclick="Suggestion('Sachin Rana');" class="link">Sachin Rana</a>
     </li>
     <li>
          <a onmouseout="RemoveDetails(this)" onmouseover="GetSomeDetail('Sachin Tendulkar', this)" onclick="Suggestion('Sachin Tendulkar');" class="link">Sachin Tendulkar</a>
     </li>
     <li>
          <a onmouseout="RemoveDetails(this)" onmouseover="GetSomeDetail('Sachin, Pas-de-Calais', this)" onclick="Suggestion('Sachin, Pas-de-Calais');" class="link">Sachin, Pas-de-Calais</a>
     </li>
</ul>
<hr/>
<p style="color:red;" id="moreInfo"></p>

JQUERY CODE

function GetSomeDetail(input, currentContext) {   
    $("#moreInfo").text(input);
}

function RemoveDetails(currentContext) {
    $("#moreInfo").text('Unloaded !');
}

Please help me out on this

Answer 1

You could do something like this

var timeout;
    toExecute = function () {
        //
    };


$(XYZ).on({
    mouseover: function () {
        if(timeout) clearTimeout(timeout);
        timeout = setTimeout(toExecute, 3000);
    },
    mouseleave': function () {
        clearTimeout(timeout);
    }
);

Here‘s the implementation on your fiddle.