如何检查用户是否在DIV上徘徊并在一定时间内保持弹出率

Question

目前，我在鼠标Enter上显示一个弹出窗口，并隐藏在鼠标离开时。我的代码在下面

   $(document).on('mouseenter', '.chat-user', function () {
    var $popover = $('#custom-popover');
    $popover.show();
    });
    $(document).on('mouseleave', '.chat-user', function () {
    var $popover = $('#custom-popover');
                $popover.hide();
    });
    Popover code:
        <div class='popover left details-popover' style="display: none;border-radius: 0px !important;" id="custom-popover">
            <div class="popover-content" id="details-container">
            </div>
          </div>
        </div>

，但我需要在下面的Mouseleave上进行

的功能

$(document).on('mouseleave', '.chat-user', function () {
// before I hide the popover I have to check the following things
1) after mouse leave I have to keep the popover alive for 50 miliseconds 
2) after 50 miliseconds I will hide the popover if 
3) user is not hovering over the popover
    var $popover = $('#custom-popover');
                $popover.hide();
    });

Answer 1

您可以在Mouseleave事件中添加超时，如果用户再次进入MouseEnter事件，则可以清除超时。

var timer = null;
$(document).on('mouseenter', '.chat-user', function () {
    var $popover = $('#custom-popover');
    $popover.show();
    if (timer != null) {
        clearTimeout(timer);
        timer = null;
    }
});
$(document).on('mouseleave', '.chat-user', function () {
    timer = setTimeout(function() {
        var $popover = $('#custom-popover');
        $popover.hide();
    }, 50);
});

Answer 2

您可以尝试.delay()。

$("#custom-popover").delay(500).fadeOut();

http://api.jquery.com/delay/