plugin - autocomplete jquery ajax

¿Delay jquery hover event?

Question

Me gustaría retrasar un evento de desplazamiento en jquery. Estoy leyendo un archivo cuando el usuario pasa el mouse sobre un enlace o etiqueta. No deseo que este evento ocurra inmediatamente en caso de que el usuario solo mueva el mouse por la pantalla. ¿Hay alguna forma de retrasar el lanzamiento 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: (1/14/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

En 2016, la solución de Crescent Fresh no funcionó como esperaba, 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 2

Mi solución es fácil. Retrasa el menú abierto si el usuario mantiene el mouseenter en obj durante 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);
});

Answer 3

Necesita verificar un temporizador en el vuelo estacionario. Si no existe (es decir, este es el primer elemento emergente), créelo. Si existe (es decir, este no es el primer vuelo estacionario), mátalo y reinícialo. Establezca la carga útil del temporizador a 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 ti.

Editar : Ah sí, jQuery plugin al rescate

Answer 4

Podría usar una llamada setTimeout () con un clearTimeout () en el evento mouseout.

Answer 5

Totalmente de acuerdo con que hoverIntent es la mejor solución, pero si eres un desafortunado usuario que trabaja en un sitio web con un proceso prolongado y prolongado para la aprobación de los complementos de 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 solo es para expandir un <li> si el mouse ha estado en él por más de 300ms.

Answer 6

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

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

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