Execute function after some time

5

Hello, I have the following code (just studying):

$('#test').hover(function(){
        $('.box-one, .box-two, .box-three').hide();
        $(this).removeClass('test').addClass('another-test').stop().animate({'height':'210px'});
        $('.my-message').fadeIn();

}, function(){
        $('.box-one, .box-two, .box-three').fadeIn();
        $(this).removeClass('another-test').stop().animate({'height':'110px'}).addClass('test');
        $('.my-message').fadeOut();
});

When hovering the mouse over the element, I should expect something around 0.400 seconds until the function activates, but if I quit or simply passed the mouse by mistake, the function should recognize that the mouse is no longer on top of the element and with that should cancel what would be done ...

    
asked by anonymous 16.03.2014 / 15:36

3 answers

8

Hmm interesting, here is an idea that uses setTimeout to trigger the animation after 400ms from the hover. In case the mouse exits, then the code clears the setTimeout and the code inside the function is ignored.

var pairar;
$('#test').hover(function () {
    pairar = setTimeout(function (self) { 
      // usei a variavel "self" como parametro,                                   
      //  e que representa o "this" fora da funcao setInterval
        $('.box-one, .box-two, .box-three').hide();
        $(self).removeClass('test').addClass('another-test').stop().animate({ 
            'height': '210px'
        });
        $('.my-message').fadeIn();
    }, 400, this); // repara que passei o "this" como parametro aqui para o seletor funcionar. 
                   // Chamei-lhe "self" dentro da funcao mas podes usar outro nome
}, function () {
    clearTimeout(pairar);
    $('.box-one, .box-two, .box-three').fadeIn();
    $(this).removeClass('another-test').stop().animate({
        'height': '110px'
    }).addClass('test');
    $('.my-message').fadeOut();
});

jsFiddle

    
16.03.2014 / 16:00
6

If all you want is to wait an X of time before actually running the code associated with hover , a timer solves your question:

var tempo_espera;
$('#test').hover(
    function() {
        tempo_espera = setTimeout(function() { 
            // o teu código mouse hover aqui
        }, 400);
    },
    function() {
        clearTimeout(tempo_espera);
        // o teu código mouse out
    }
);

What we are doing is to create an envelope whenever the mouse goes over the element, so that your code will only run after the specified time.

When the mouse exits the element, we are clearing the timeout.

    
16.03.2014 / 16:04
5

I recommend using the hoverIntent plugin.

However, it's not hard to implement in pure Javascript with the use of window.setTimeout(callback, millisecs) .

var hoverIn = function () { ... }; // callback para o que fazer quando o
                                   // cursor entra no elemento #test

var hoverOut = function () { ... }; // callback para o que fazer quando o
                                    // cursor sai do elemento #test
var timeout; // referência do timer

$('#test').hover(function () {
    // ao entrar no elemento #test, o timer será ajustado

    timeout = setTimeout(function () { // quando o timer for disparado...
       timeout = false; // ... apagamos sua referência ...
       hoverIn(); // e executamos o callback de entrada
    }, 400);

}, function () {
    // ao sair do elemento #test ...

    if ( timeout )
       clearTimeout(timeout); // Se ainda houver referência ao timer,
                              // nós o desativamos
    else
       hoverOut(); // Caso contrário, nós executamos o callback de saída,
                   // pois hoverIn() já foi executado. 
});
    
16.03.2014 / 15:58