Задержка события зависания jQuery?
Я хотел бы отложить событие зависания в 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)
}
Ответы 6
Используйте плагин hoverIntent для jquery: http://cherne.net/brian/resources/jquery.hoverIntent.html
Он абсолютно идеален для того, что вы описываете, и я использовал его почти в каждом проекте, который требовал активации меню при наведении курсора мыши и т. д.
Есть одна проблема с этим подходом, некоторые интерфейсы лишены состояния «зависания», например. мобильные браузеры, такие как сафари на iphone. Возможно, вы скрываете важную часть интерфейса или навигации, не имея возможности открыть ее на таком устройстве. Вы можете обойти это с помощью CSS для конкретного устройства.
Или этот плагин тоже работает как шарм github.com/john-terenzio/jQuery-Hover-Delay
Вы можете использовать вызов setTimeout () с clearTimeout () для события mouseout.
Вам нужно проверить таймер при наведении курсора. Если его не существует (т.е. это первое наведение), создайте его. Если он существует (т.е. это нет при первом наведении), убейте его и перезапустите. Установите полезную нагрузку таймера в свой код.
$(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 (таймер); таймер = ноль; на стороне mouseout, но это сработало отлично и позволило избежать YAP (еще один плагин)
@Andiih Отличный звонок, спасибо, что познакомили меня с аббревиатурой "YAP".
вы, вероятно, имеете в виду debounce ()
Мое решение простое. Отложить открытие меню, если пользователь держит курсор мыши на объекте более 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);
});
Полностью согласен с тем, что 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 мс.
Спасибо, нашел это более полезным, чем другие ответы.
В 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;
});
Спасибо за использование hoverIntent