Затримка jquery наведену подію?

Я хотів би затримати подію наведення в 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 для jquery: http://cherne.net/brian/resources/jquery.hoverIntent.html

Це абсолютно ідеально для того, що ви описуєте, і я використовував це майже в кожному проекті, який вимагав активації меню курсор миші тощо ...

Цей підхід є одним, деякі інтерфейси позбавлені стану "наведення", наприклад. мобільні браузери, як сафарі на iphone. Можливо, ви приховуєте важливу частину інтерфейсу або навігації, не маючи можливості відкрити його на такому пристрої. Ви можете подолати це за допомогою CSS для пристрою.

Потрібно перевірити таймер на наведення курсора. Якщо його не існує (тобто це перше наведення), створіть його. Якщо він існує (тобто це не перше наведення), вбийте його та перезапустіть. Встановіть корисний набір таймера для вашого коду.

$(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 плагін на допомогу

Повністю погоджуєтесь, що 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 мс.

Ви можете використовувати виклик setTimeout () з clearTimeout () для події mouseout.

У 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;
});

Моє рішення просте. Затримка відкритого меню, якщо користувач утримує мишіцентр на об'єкті понад 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);
});