如何激活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);  
    }; 

});