Вопрос по jquery, mouseevent, events, settimeout – Мое решение легко. Задержка открытия меню, если пользователь удерживает указатель мыши на объекте более 300 мс:

93

ел бы отложить событие зависания в 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)
}
Спасибо за предоставление использования hoverIntent JavaKungFu

Ваш Ответ

6   ответов
49

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

$(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 плагин на помощь

Я добавил clearTimeout (таймер); таймер = NULL; в стороне от мыши, но это работало отлично и избегало YAP (еще один плагин) Andiih
вы, вероятно, имеете в виду debounce () Vitim.us
@Andiih Отличный звонок, и спасибо, что познакомили меня с аббревиатурой "YAP". Jon
В любом случае, спасибо за решение без плагинов! Jrgns
91

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

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

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

Или этот плагин работает также как шармgithub.com/john-terenzio/jQuery-Hover-Delay mica
-2

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

В 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;
});
11

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

Спасибо, нашел это более полезным, чем другие ответы. Ray
6

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

Похожие вопросы