Jquery Hover Event verzögern?

Ich möchte ein Schwebeereignis in jquery verzögern. Ich lese aus einer Datei, wenn der Benutzer mit der Maus über einen Link oder eine Beschriftung fährt. Ich möchte nicht, dass dieses Ereignis sofort auftritt, wenn der Benutzer nur die Maus über den Bildschirm bewegt. Gibt es eine Möglichkeit, das Auslösen des Ereignisses zu verzögern?

Danke dir.

Beispielcode:

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

UPDATE: (14.01.09) Nach dem Hinzufügen des HoverIntent-Plugins wurde der obige Code wie folgt geändert, um ihn zu implementieren. Sehr einfach zu implementieren.

$(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)
}

Verwenden Sie das hoverIntent-Plugin für jquery: http://cherne.net/brian/resources/jquery.hoverIntent.html

Es ist absolut perfekt für das, was Sie beschreiben, und ich habe es bei fast jedem Projekt verwendet, bei dem Mouseover-Aktivierung von Menüs usw. erforderlich war.

Es gibt ein Problem bei diesem Ansatz, einige Schnittstellen haben keinen Schwebezustand, z. mobile Browser wie Safari auf dem iPhone. Möglicherweise verstecken Sie einen wichtigen Teil der Benutzeroberfläche oder Navigation, ohne sie auf einem solchen Gerät öffnen zu können. Sie können dies mit gerätespezifischem CSS umgehen.

Sie müssen einen Timer beim Hover überprüfen. Wenn es nicht vorhanden ist (dh dies ist der erste Schwebeflug), erstellen Sie es. Wenn es existiert (dh dies ist nicht der erste Schwebeflug), beenden Sie es und starten Sie es neu. Stellen Sie die Timer-Nutzdaten auf Ihren Code ein.

$(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
    });
});

Ich wette, jQuery hat eine Funktion, die das alles für Sie zusammenfasst.

Edit : Ah ja, jQuery Plugin zur Rettung

Stimmen Sie voll und ganz zu, dass hoverIntent die beste Lösung ist. Wenn Sie jedoch ein unglücklicher Kerl sind, der auf einer Website mit einem langen und langwierigen Prozess zur Genehmigung von jQuery-Plugins arbeitet, finden Sie hier eine schnelle und schmutzige Lösung, die für mich gut funktioniert hat:

$('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);
    }
});

Dies ist nur zum Erweitern eines <li> gedacht, wenn die Maus länger als 300 ms darauf war.

Sie können einen setTimeout () -Aufruf mit einem clearTimeout () für das mouseout-Ereignis verwenden.

Im Jahr 2016 hat die Lösung von Crescent Fresh für mich nicht wie erwartet funktioniert, daher habe ich mir Folgendes ausgedacht:

$(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;
});

Meine Lösung ist einfach. Öffnen Sie das geöffnete Menü, wenn der Benutzer das Mauszentrum länger als 300 ms auf dem Objekt hält:

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