jquery - 使用 jquery 仅当鼠标悬停超过 3 秒时才触发 onmouseover

Question

我有一些链接，如下所示，这里是 jsfiddle link到它。

我想要什么？

我希望仅当鼠标悬停超过 3 秒时才触发 jquery 方法。我知道我必须使用 setTimeout 但我无法理解如何使用它。

如果有人可以帮助我编辑我的 fiddle link

HTML 代码

<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 代码

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

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

请帮我解决这个问题

Answer 1

你可以做这样的事情

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


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

Here是你的 fiddle 上的实现。