Question

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

我想要什么？

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

如果有人可以通过编辑我的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 !');
}

请帮我解决这个问题

Answer 1

你可以做这样的事情

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


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

Here是你小提琴上的实现。

Answer 2

我建议您使用this plugin。

您可以使用setTimeout()进行此操作，但可能会遇到比您想象的更多问题

Answer 3

小提琴：http://jsfiddle.net/Guffa/3YBr8/2/

您可以通过在脚本中而不是在HTML标记中设置事件来大量清理代码。您可以将脚本中所需的文本放在每个项目的数据属性中。

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

当用户悬停项目时启动计时器。使用变量来保持计时器的手柄，这样如果鼠标在时间过去之前被删除，则可以停止计时器。

function info(text) {
    $("#moreInfo").text(text);
}

function GetSomeDetail(input) {   
    info(input);
}

function RemoveDetails() {
    info('Unloaded !');
}

function Suggestion(input) {
    alert(input);
}

$(document).ready(function(){

    var timer = null;

    $('.link').mouseover(function(){
        if (timer != null) {
            RemoveDetails();
        }
        var input = $(this).data('input');
        timer = window.setTimeout(function(){
            timer = null;
            GetSomeDetail(input);
        }, 3000);
        info('timer started');
    }).mouseout(function(){
        if (timer != null) {
            window.clearTimeout(timer);
            timer = null;
            info('timer stopped');
        } else {
            RemoveDetails();
        }
    }).click(function(){
        Suggestion($(this).data('input'))
    });

});

我在计时器启动或停止时添加了显示某些信息的调用，当然这些信息不会出现在最终结果中。

Answer 4

也许像

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

JS

var timer;

$(".link").on({
    mouseenter: function() {
        var text = $(this).text();
        timer = setTimeout(function() {
            $("#moreInfo").text(text);
        }, 1000); //set to one second now
    },
    mouseleave: function() {
        clearTimeout(timer);
        $("#moreInfo").text('Unloaded !');
    },
    click: function() {
        Suggestion($(this).text());
    }
});

FIDDLE

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

4 个答案: