jquery / javascript blur / focus&的setTimeout

时间:2011-11-17 16:50:04

标签: javascript jquery settimeout

当鼠标超过产品编号(焦点)时,显示一些产品信息。 当用户不再超过产品编号(模糊)时,请等待3秒钟,然后隐藏详细信息。

$('.productNumber').live('blur', function() {               
    setTimeout(function(){
    var divToPutData = $(this); 
    divToPutData.hide();
}, 3000);
});

现在用户说如果用户在5秒内将鼠标移回以停止倒计时,直到模糊事件再次触发。不确定如何使用setTimeout执行此操作。

5 个答案:

答案 0 :(得分:1)

使用clearTimeout()

var myTimeout = null;

$('.productNumber').live('mouseover', function() {  
    //If timeout is still active, clear
    if(myTimeout != null)
        clearTimeout(myTimeout);
});

$('.productNumber').live('blur', function() {
    //Store the ID returned by setTimeout
    myTimout = setTimeout(function(){ divToPutData.hide(); }, 3000);
});

答案 1 :(得分:0)

使用clearTimeout函数。

setTimeout返回一个数字id,你可以将它存储在一个变量中,然后将它传递给clearTimeout函数:

var myTimeout = setTimeout ( function(){alert(2);}, 1000);
clearTimeout(myTimeout);

答案 2 :(得分:0)

var t;
$('.productNumber').live('mouseover', function() {  
    clearTimeout(t);
});

$('.productNumber').live('mouseout', function() {               
    t = setTimeout(function(){
    divToPutData.hide();
}, 3000);
});

答案 3 :(得分:0)

将setTimeout分配给变量,因此您可以在悬停时取消它

var hideTimeout;
$('.productNumber').live('blur',function() {
    hideTimeout = setTimeout(function() {
        divToPutData.hide();
    }, 3000);
});
$('.productNumber').live('mouseover',function() {
    clearTimeout(hideTimeout);
    // Do the show stuff
}
  • jQuery不是我最强的语言,因此您可能需要稍微修改一下,但这是此方案的一般方法。

答案 4 :(得分:0)

使用jQuery stop()中止任何正在进行的动画

在此测试:http://jsfiddle.net/T7kRr/1/

<强>的jQuery

$(".productNumber").hover(
  function () {
      $(this).find(".productDesc:last").stop(true, true).show();
  }, 
  function () {
      $(this).find(".productDesc:last").delay(3000).fadeOut(); 
  }
);

<强> HTML

<div class="productNumber">1001<span class="productDesc" style="display:none">iPhone</span></div>
<div class="productNumber">2001<span class="productDesc" style="display:none">iPad</span></div>
<div class="productNumber">3333<span class="productDesc" style="display:none">TV</span></div>
<div class="productNumber">9999<span class="productDesc" style="display:none">HiFi</span></div>