Thêm chậm trễ để MouseLeave trong jquery

Question

Tôi đang sử dụng mã này vào trang web của tôi và tôi đã tự hỏi làm thế nào tôi có thể thêm một sự chậm trễ đến chức năng MouseLeave

$target.mouseenter(function(e){ 
       var $tooltip=$("#"+this._tipid) 
       ddimgtooltip.showbox($, $tooltip, e) 
      }) 
      $target.mouseleave(function(e){ 
      var $tooltip=$("#"+this._tipid); 
      setTimeout(function() { ddimgtooltip.hidebox($, $tooltip); }, 4000); 
      }) 

      $target.mousemove(function(e){ 
       var $tooltip=$("#"+this._tipid) 
       ddimgtooltip.positiontooltip($, $tooltip, e) 
      }) 
      if ($tooltip){ //add mouseenter to this tooltip (only if event hasn't already been added) 
       $tooltip.mouseenter(function(){ 
        ddimgtooltip.hidebox($, $(this)) 
       }) 

Answer 1

Bạn có thể sử dụng setTimeout() và một chức năng ẩn danh cho điều này:

$target.mouseleave(function(e){ 
var $tooltip=$("#"+this._tipid); 
setTimeout(function() { ddimgtooltip.hidebox($, $tooltip); }, 250); 
}) 

Điều này sẽ trì hoãn 250ms sau khi thoát trước khi ẩn, bạn chỉ có thể điều chỉnh giá trị đó nếu cần.

Answer 2

Sự cố chỉ với bộ hẹn giờ sẽ là nếu bạn di chuột sang trái và sau đó nhập lại nó sẽ vẫn ẩn sau khi bộ hẹn giờ đó hoàn tất. Một cái gì đó như sau có thể làm việc tốt hơn bởi vì chúng tôi có thể hủy bỏ bộ đếm thời gian bất cứ khi nào chuột vào mục tiêu.

var myTimer=false; 
$target.hover(function(){ 
    //mouse enter 
    clearTimeout(myTimer); 
}, 
function(){ 
    //mouse leave 
    var $tooltip=$("#"+this._tipid); 
    myTimer = setTimeout(function(){ 
     ddimgtooltip.hidebox($, $tooltip); 
    },500) 
}); 

Answer 3

(function($){ 
    $.fn.lazybind = function(event, fn, timeout, abort){ 
     var timer = null; 
     $(this).bind(event, function(){ 
      timer = setTimeout(fn, timeout); 
     }); 
     if(abort == undefined){ 
      return; 
     } 
     $(this).bind(abort, function(){ 
      if(timer != null){ 
       clearTimeout(timer); 
      } 
     }); 
    }; 
})(jQuery); 


$('#tooltip').lazybind(
    'mouseout', 
    function(){ 
     $('#tooltip').hide(); 
    }, 
    540, 
    'mouseover'); 

http://www.ideawu.com/blog/2011/05/jquery-delay-bind-event-handler-lazy-bind.html

Answer 4

Bạn có thể sử dụng chức năng này tôi chỉ viết:

$.fn.hoverDelay = function(handlerIn, handlerOut, delay) { 
    if(delay === undefined) delay = 400; 
    var timer; 
    this.hover(function(eventObject) { 
     clearTimeout(timer); 
     handlerIn.apply(this,eventObject); 
    }, function(eventObject) { 
     timer = setTimeout(handlerOut.bind(this, eventObject), delay); 
    }); 
}; 

Nó hoạt động giống như bình thường $.hover trừ có sự chậm trễ 400ms trước khi sự kiện nghỉ chuột được gọi (bị hủy nếu bạn di chuyển chuột vào trong khung thời gian đó).