web-dev-qa-db-fra.com

Retarder l'événement de vol stationnaire?

Je voudrais retarder un événement de survol dans JQuery. Je lis un fichier lorsque l'utilisateur passe au-dessus d'un lien ou d'une étiquette. Je ne veux pas que cet événement se produise immédiatement au cas où l'utilisateur déplacerait simplement la souris sur l'écran. Y a-t-il un moyen de retarder l'événement du tir?

Merci.

Exemple de code:

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

PDATE: (14/01/09) Après avoir ajouté le plugin HoverIntent, le code ci-dessus a été remplacé par le suivant pour le mettre en œuvre. . Très simple à mettre en œuvre.

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

Utilisez le plugin hoverIntent pour jquery: http://cherne.net/brian/resources/jquery.hoverIntent.html

C'est absolument parfait pour ce que vous décrivez et je l'ai utilisé sur presque tous les projets nécessitant l'activation de la souris au-dessus des menus, etc.

Il existe un point d’apparition de cette approche, certaines interfaces sont dépourvues d’état de survol, par exemple. les navigateurs mobiles comme safari sur l'iphone. Vous pouvez masquer une partie importante de l'interface ou de la navigation sans aucun moyen de l'ouvrir sur un tel appareil. Vous pouvez résoudre ce problème avec des CSS spécifiques à l'appareil.

91
roborourke

Vous devez vérifier une minuterie en vol stationnaire. S'il n'existe pas (c'est-à-dire qu'il s'agit du premier survol), créez-le. S'il existe (c'est-à-dire et non le premier survol), tuez-le et redémarrez-le. Définissez la charge du minuteur sur votre code.

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

Je parie que jQuery a une fonction qui résume tout cela pour vous.

Edit : Ah oui, le plugin jQuery à la rescousse

49
Crescent Fresh

Tout à fait d'accord sur le fait que hoverIntent est la meilleure solution, mais si vous êtes un malheureux qui travaille sur un site Web avec un processus long et prolongé pour l'approbation des plugins jQuery, voici une solution rapide et sale qui a bien fonctionné pour moi:

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

C’est juste pour élargir un <li> si la souris est dessus depuis plus de 300 ms.

11
Matthew Millman

Vous pouvez utiliser un appel setTimeout () avec clearTimeout () pour l'événement mouseout.

6
Dan Monego

En 2016, la solution de Crescent Fresh n'a pas fonctionné comme prévu, alors j'ai proposé ceci:

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