jquery/javascript 模糊/焦点 & settimeout答案

【问题标题】：jquery/javascript blur/focus & settimeoutjquery/javascript 模糊/焦点 & settimeout
【发布时间】：2011-11-18 01:05:36
【问题描述】：

当鼠标悬停在产品编号（焦点）上时，显示一些产品信息。当用户不再关注产品编号（模糊）时，等待 3 秒，然后隐藏详细信息。

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

现在用户说如果用户在这 5 秒内向后移动鼠标以停止倒计时，直到再次触发模糊事件。不知道如何用 setTimeout 做到这一点。

【问题讨论】：

标签： javascript jquery settimeout

【解决方案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);
});

【讨论】：

太棒了！ javascript（和 Hill 先生）从未停止让我惊叹！
hhm，myTimeOut 是全局变量吗？
是的，必须是，否则你无法通过其他函数清除超时时间
大声笑在几分钟内可以给出多少个完全相同的答案？
@3n1gm4，好问题！按最旧的帖子排序，您会发现我的帖子是第一个。 =)

【解决方案2】：

使用函数 clearTimeout。

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

mouseout 和 blur 有什么区别？
mouseleave w3schools.com/jquery/event_mouseout.asp blur w3schools.com/jquery/event_blur.asp，主要是因为当用户使用鼠标进行模糊时，Chrome 不支持这个。 quirksmode.org/dom/events/blurfocus.html

【解决方案4】：

将 setTimeout 分配给一个变量，这样您就可以在悬停时再次取消它

var hideTimeout;
$('.productNumber').live('blur',function() {
    hideTimeout = setTimeout(function() {
        divToPutData.hide();
    }, 3000);
});
$('.productNumber').live('mouseover',function() {
    clearTimeout(hideTimeout);
    // Do the show stuff
}

jQuery 不是我最擅长的语言，因此您可能需要稍微修改一下，但这是此场景的一般方法。

【讨论】：

【解决方案5】：

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

【讨论】：