如何激活mouseleave，如果它已经x时间？

Question

所以，我有这种类型的情况，但我只想“做些什么”，如果用户“mouseleave（s）”超过x时间，比如说一秒钟。我应该如何实现？

$("#someElement, #someOtherElement").mouseleave(function() { 
    // Do something. 
}); 

后来我又说：

$('.popover3-test').popover({ 
     placement:'bottom', 
     template: $('.popover2'), 
     trigger: 'manual', 

     }).mouseenter(function(e) { 
     $(this).popover('show'); 

     $(".popover3-test, .popover2").each(function() { 
      var t = null; 

      $(this) 
       .mouseleave(function() { 
        t = setTimeout(function() { 
         $('.popover2').hide(); 
        }, 1000); // Or however many milliseconds 
       }) 
       .mouseenter(function() { 
        if(t !== null) 
         clearTimeout(t); 
       }) 
      ; 
     }); 


}); 

Answer 1

setTimeout应该做的伎俩：

$("#someElement, #someOtherElement").each(function() { 
    var t = null; 

    $(this) 
     .mouseleave(function() { 
      t = setTimeout(function() { 
       // Do something. 
      }, 1000); // Or however many milliseconds 
     }) 
     .mouseenter(function() { 
      if(t !== null) { 
       clearTimeout(t); 
       t = null; 
      } 
     }) 
    ; 
}); 

编辑：如果你想让它在任何工作，只是删除.each：

var t = null; 

$("#someElement, #someOtherElement") 
    .mouseleave(function() { 
     t = setTimeout(function() { 
      // Do something. 
     }, 1000); // Or however many milliseconds 
    }) 
    .mouseenter(function() { 
     if(t !== null) { 
      clearTimeout(t); 
      t = null; 
     } 
    }) 
; 

Answer 2

这可能不是因为是工作，但给你的一些想法......

var elapsed = 0; 
var timer = setInterval(function(){ 
    elapsed += 20; 
    if(elapsed >= 1000) { 
    doSomething(); 
    clearInterval(timer); 
    } 
}, 20); 
$('#some').mouseleave(timer); 
$('#some').mouseenter(function(){clearInterval(timer);elapsed=0;}); 

Answer 3

$("#someElement, #someOtherElement").bind('mouseenter mouseleave', (function() { 

    var timer; 

    return function (e) { 

     if(e.type === 'mouseleave') { 
      timer = setTimeout(function() { 
      //do something 
      }, 1000); 
     } else { 
      clearTimeout(timer); 
     } 

    }; 

}())); 

编辑 - 可对多个元素

$("#someElement, #someOtherElement").bind('mouseenter mouseleave', function (e) { 

     var timer = $(this).data('timer'); 

     if(e.type === 'mouseleave') { 
      timer = setTimeout(function() { 
      //do something 
      }, 1000); 
     } else { 
      clearTimeout(timer); 
     } 

     $(this).data('timer', timer);  
    }; 

});