1

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

我想要的是 ？

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

如果有人可以通过编辑我的小提琴链接来帮助我

代码

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

查询代码

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

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

请帮我解决这个问题

4

4 回答 4

3

你可以做这样的事情

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


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

这是您的小提琴上的实现。

于 2012-08-27T12:56:51.977 回答
0

我推荐你使用这个插件。

您可以使用它，setTimeout()但您可能遇到的问题比您想象的要多

于 2012-08-27T12:57:05.420 回答
0

小提琴：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'))
    });

});

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

于 2012-08-27T13:12:10.857 回答
0

也许像

<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());
    }
});

小提琴 ​</p>

于 2012-08-27T13:16:07.200 回答