Delay jquery evento foco?

Question

Gostaria de adiar um evento em foco em jQuery. Estou lendo de um arquivo quando paira usuário através de um link ou o rótulo. Eu não quero que este evento ocorra imediatamente no caso do usuário está apenas movendo o mouse pela tela. Existe uma maneira de adiar o evento de disparar?

Obrigado.

código Exemplo:

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

UPDATE: (1/14/09) Depois de adicionar o plug-in hoverIntent o código anterior foi alterada para o seguinte para a sua implementação. Muito simples 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

Use o hoverIntent do plugin para jQuery: http://cherne.net/brian/resources /jquery.hoverIntent.html

É absolutamente perfeito para o que você descreve e eu usei-o em quase todos os projetos que exigia ativação mouseover de menus etc ...

Há uma pegadinha com esta abordagem, algumas interfaces são desprovidos de um pairar estado eg. navegadores móveis como safari no iPhone. Você pode estar escondendo uma parte importante da interface ou de navegação com nenhuma forma de abri-lo em tal dispositivo a. Você pode contornar isso com CSS dispositivo específico.

Answer 2

Você precisa verificar um temporizador em foco. Se ela não existir (ou seja, esta é a primeira pairar), criá-la. Se ele existe (ou seja, este é não o primeiro pairar), matá-lo e reiniciá-lo. Definir a carga útil temporizador para o seu 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
    });
});

Eu aposto jQuery tem uma função que envolve tudo isso para você.

Editar : Ah sim, plugin jQuery para o resgate

Answer 3

Concordo totalmente que hoverIntent é a melhor solução, mas se acontecer de você ser um sod infeliz que trabalha em um site com um processo longo e demorado para aprovação de plugins jQuery, aqui está uma solução rápida e suja que funcionou bem para mim:

$('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 é apenas para expandir um

Se o mouse tem sido sobre ele por mais de 300ms.

Answer 4

Você pode usar uma chamada setTimeout () com um clearTimeout () no evento mouseout.

Answer 5

Em solução de 2016 Crescent Fresh não funcionou como esperado para mim, então eu vim com essa:

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

A minha solução é fácil. Atraso do menu aberto se mantendo usuário mouseenter em obj mais de 300ms:

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