僅當鼠標懸停超過3秒時纔會觸發onmouseover usnig jquery

我有一些鏈接，如下所示，這裏是一個jsfiddle link。僅當鼠標懸停超過3秒時纔會觸發onmouseover usnig jquery

我想要什麼？

我希望jquery方法只有在鼠標懸停超過3秒時纔會被觸發。我知道我必須使用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 !'); 
}

請幫我在這

來源

2012-08-27 Yasser

你可以做這樣的事情

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


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

Here就在你的小提琴實現。

來源

2012-08-27 12:56:51 banzomaikaka

正如你看到的，我需要通過從鏈接生成的參數，我該怎麼做呢？ – Yasser

很好的答案 - 如果鼠標在超時到期之前離開該區域，就會取消取消超時的細微處理。給予好評！ –

請問您可以編輯小提琴的鏈接....我試着用你的代碼這個http://jsfiddle.net/3YBr8/1/，沒有按預期工作 – Yasser

我建議你使用this plugin。

可以使這個使用setTimeout()但你可能有更多的問題，比你想象的

來源

2012-08-27 12:57:05 Andrei

小提琴：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-27 13:12:10 Guffa

也許像

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

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

來源

2012-08-27 13:16:07 adeneo

僅當鼠標懸停超過3秒時纔會觸發onmouseover usnig jquery

回答

相關問題