Задержать событие jquery hover?

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

Спасибо.

Пример кода:

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

ОБНОВЛЕНИЕ: (14.01.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)
}

events jquery settimeout mouseevent
person Brettski    schedule 12.01.2009    source источник
comment
Спасибо за предоставление использования для hoverIntent   -  person JavaKungFu    schedule 18.12.2014

Ответы (6)


arrow_upward
91
arrow_downward

Используйте подключаемый модуль hoverIntent для jquery: http://cherne.net/brian/resources/jquery.hoverIntent.html

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

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

person roborourke    schedule 12.01.2009
comment
Или этот плагин также работает как шарм github.com/john-terenzio/jQuery-Hover- Задержка - person mica; 31.08.2016

arrow_upward
50
arrow_downward

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

$(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 спешит на помощь

person Crescent Fresh    schedule 12.01.2009
comment
В любом случае спасибо за решение без плагинов! - person Jrgns; 21.10.2010
comment
Я добавил clearTimeout (таймер); таймер = ноль; на стороне mouseout, но это работало отлично и избегало YAP (еще один плагин) - person Andiih; 16.01.2012
comment
@Andiih Отличный звонок, и спасибо, что познакомили меня с аббревиатурой YAP. - person Jon; 29.05.2012
comment
вы, вероятно, имеете в виду debounce() - person Vitim.us; 18.07.2016

arrow_upward
11
arrow_downward

Полностью согласен с тем, что 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 мс.

person Matthew Millman    schedule 08.12.2011
comment
Спасибо, нашел это более полезным, чем другие ответы. - person Ray; 19.02.2018

arrow_upward
6
arrow_downward

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

person Dan Monego    schedule 12.01.2009

arrow_upward
1
arrow_downward

В 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;
});
person the_web    schedule 09.04.2016

arrow_upward
-2
arrow_downward

Мое решение простое. Задержка открытия меню, если пользователь держит указатель мыши на объекте более 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);
});
person onekamil    schedule 02.09.2011