Задержка jquery hover event?

Я хотел бы отложить событие hover в jquery. Я читаю из файла, когда пользователь наводит курсор на ссылку или ярлык. Я не хочу, чтобы это событие происходило немедленно, если пользователь просто перемещает мышь по экрану. Есть ли способ отсрочить событие от стрельбы?

Спасибо.

Пример кода:

$(function() {
    $('#container a').hover(function() {
        $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
            {filename:'file.txt'},
            function() {
                $(this).appendTo('#info');
            }
         );
    },
        function() { $('#info').remove(); }
    });
});

ОБНОВЛЕНИЕ: (1/14/09) После добавления плагина HoverIntent вышеуказанный код был изменен на следующий, чтобы реализовать его. Очень просто реализовать.

$(function() {
    hiConfig = {
        sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
        interval: 200, // number = milliseconds for onMouseOver polling interval
        timeout: 200, // number = milliseconds delay before onMouseOut
        over: function() {
            $('<div id="fileinfo" />').load('ReadTextFileX.aspx', {filename:'file.txt'},
                function() {
                   $(this).appendTo('#info');
                }
             );
        }, // function = onMouseOver callback (REQUIRED)
        out: function() { $('#info').remove();  } // function = onMouseOut callback (REQUIRED)
    }
    $('#container a').hoverIntent(hiConfig)
}

Ответ 1

Используйте плагин hoverIntent для jquery: http://cherne.net/brian/resources/jquery.hoverIntent.html

Это абсолютно идеально подходит для того, что вы описываете, и я использовал его почти для каждого проекта, который требовал активации мыши и меню и т.д.

Для этого подхода есть один способ, некоторые интерфейсы лишены состояния "зависания", например. мобильные браузеры, такие как сафари на iphone. Вы можете скрывать важную часть интерфейса или навигации, не открывая его на таком устройстве. Вы можете обойти это с помощью специальных CSS-устройств.

Ответ 2

Вам нужно проверить таймер на зависании. Если он не существует (т.е. Это первый наведение), создайте его. Если он существует (т.е. Это не первый наведение), убейте его и перезапустите. Установите полезную нагрузку таймера на ваш код.

$(function() {
    var timer;

    $('#container a').hover(function() {
        if(timer) {
            clearTimeout(timer);
            timer = null
        }
        timer = setTimeout(function() {
            $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
                {filename:'file.txt'},
                function() {
                    $(this).appendTo('#info');
                }
            );
        }, 500)
    },
    // mouse out
    });
});

Я ставлю, что jQuery имеет функцию, которая обертывает все это для вас.

Изменить: Ах да, плагин jQuery для спасения

Ответ 3

Полностью согласен с тем, что hoverIntent - лучшее решение, но если вы оказались неудачным дерном, который работает на веб-сайте с длинным и затяжным процессом для одобрения плагинов jQuery, вот быстрое и грязное решение, которое хорошо сработало для меня:

$('li.contracted').hover(function () {
    var expanding = $(this);
    var timer = window.setTimeout(function () {
        expanding.data('timerid', null);

            ... do stuff

    }, 300);
    //store ID of newly created timer in DOM object
    expanding.data('timerid', timer);
}, function () {
    var timerid = $(this).data('timerid');
    if (timerid != null) {
        //mouse out, didn't timeout. Kill previously started timer
        window.clearTimeout(timerid);
    }
});

Это просто для расширения <li> если мышь была на нем дольше 300 мс.

Ответ 4

Вы можете использовать вызов setTimeout() с clearTimeout() в событии mouseout.

Ответ 5

В 2016 году решение Crescent Fresh работало не так, как ожидалось, поэтому я придумал следующее:

$(selector).hover(function() {
    hovered = true;
    setTimeout(function() {
        if(hovered) {
            //do stuff
        }
    }, 300); //you can pass references as 3rd, 4th etc. arguments after the delay

}, function() {
    hovered = false;
});

Ответ 6

Мое решение легко. Закройте открытое меню, если пользователь будет удерживать центр мыши на объекте более 300 мсек:

var sleep = 0;
$('#category li').mouseenter(function() {
    sleep = 1;
    $('#category li').mouseleave(function() {
        sleep = 0;
    });
    var ob = $(this);
    setTimeout(function() {                         
        if(sleep) {
            // [...] Example:
            $('#'+ob.attr('rel')).show();
        }
    }, 300);
});