Retraso jquery evento flotante?

Question

Me gustaría retrasar un evento flotante en jquery. Estoy leyendo un archivo cuando el usuario se desplaza sobre un enlace o etiqueta. No quiero que este evento ocurra inmediatamente en caso de que el usuario simplemente mueva el mouse por la pantalla. ¿Hay alguna manera de retrasar el disparo del evento?

Gracias.

Código de ejemplo:

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

ACTUALIZACIÓN: (14/01/09) Después de agregar el complemento HoverIntent, el código anterior se cambió a lo siguiente para implementarlo. Muy simple de implementar.

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

Answer 1

Utilice el complemento hoverIntent para jquery: http://cherne.net/brian/resources /jquery.hoverIntent.html

Es absolutamente perfecto para lo que describe y lo he usado en casi todos los proyectos que requirieron la activación del mouse sobre menús, etc.

Hay un problema con este enfoque, algunas interfaces carecen de un estado de 'desplazamiento', por ejemplo. navegadores móviles como safari en el iphone. Es posible que esté ocultando una parte importante de la interfaz o la navegación sin poder abrirla en dicho dispositivo. Podría solucionar esto con CSS específico del dispositivo.

Answer 2

Debe verificar un temporizador al pasar el mouse sobre él. Si no existe (es decir, este es el primer vuelo estacionario), créelo. Si existe (es decir, esto es no el primer elemento emergente), elimínelo y reinícielo. Establezca la carga útil del temporizador en su código.

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

Apuesto a que jQuery tiene una función que envuelve todo esto para usted.

Editar : Ah sí, complemento jQuery para el rescate

Answer 3

Totalmente de acuerdo en que hoverIntent es la mejor solución, pero si eres un desgraciado que trabaja en un sitio web con un proceso largo y prolongado para la aprobación de los complementos jQuery, aquí hay una solución rápida y sucia que funcionó bien para mí:

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

Este es solo para expandir un < li > si el mouse ha estado en él por más de 300 ms.

Answer 4

Puede usar una llamada setTimeout () con clearTimeout () en el evento mouseout.

Answer 5

En 2016, la solución de Crescent Fresh no funcionó como se esperaba para mí, así que se me ocurrió esto:

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

Answer 6

Mi solución es fácil. Retrasar el menú abierto si el usuario mantiene el mouseenter en obj durante más de 300 ms:

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