6

Como criar uma função em jQuery que redirecione o visitante para uma página após o ele não mexer o mouse por 2 minutos ou mais?

Exemplo: O usuário está na pagina produtos.php e caso o usuário fique parado com o mouse ou ele esteja em outra aba/guia (Facebook por exemplo), depois de 2 minutos ele redirecione pra aguarde.php.

3 Respostas 3

9

Você pode usar um timer em um evento mousemove

Como no exemplo abaixo:

 $(function() { //onload
   setEvent();

});

$(document).on('mousemove', function() { //mouse move 
    if (timeout !== null) {
        $(document.body).text('');
        clearTimeout(timeout); //clear no timer
    }
    setEvent(); //seta ele novamente para caso aja inatividade faça o evento
});

function setEvent(){
    timeout = setTimeout(function() {
        $(document.body).text('Mouse idle for 3 sec'); //Teu evento após terminar o timer
    }, 3000); //tempo do timer
}

DEMO

Referencia: Link

7
  • Se eu executo esse código e fico mexendo o mouse logo de inicio por mais de 3 segundos e depois paro e deixo o mouse parado ele não executa. Ele só executa se quando eu iniciar o script, ficar com o mouse parado 21/07/2014 às 22:58
  • E também se fico com o mouse encima do documento ele não redireciona, só se fica fora do documento 21/07/2014 às 23:01
  • Mostre seu código, você pode iniciar o timeout e apenas no mousemove dar um clear nele
    – Rod
    21/07/2014 às 23:02
  • Editei, teste-o
    – Rod
    21/07/2014 às 23:07
  • Desculpe por estar ressuscitando o tópico, porém estou precisando exatamente disso em meu sistema. Esse código só funciona no caso do mouse? e no caso do teclado? pois muitas pessoas podem estar no chat por exemplo.
    – user24136
    13/05/2015 às 12:17
8

Código adaptado do @Rod

$(function() {
    timeout = setTimeout(function() {
        window.location.href = "http://pt.stackoverflow.com";
    }, 120000);
});

$(document).on('mousemove', function() {
    if (timeout !== null) { 
        clearTimeout(timeout);
    }
    timeout = setTimeout(function() {
        window.location.href = "http://pt.stackoverflow.com";
    }, 120000);
});

No meu exemplo foi adicionado a função window.location.href que cria o redirecionamento e foi removido a função que fazia com que ao passar o mouse sobre a página exclui-se o conteúdo da página.

Foi adicionada uma uma contagem em milisegundos equivalente a 2 minutos (120.000 milisegundos é igual à 120 segundos, que é igual a 2 minutos, pois 1 minuto tem 60 segundos).

Após 2 minutos é redirecionado para http://pt.stackoverflow.com

Agora basta que você edite-o com a URL para qual você deseja que ocorra o redirecionamento. No caso:

window.location.href = "aguarde.php";

Agora está 100% funcional, do jeito que você queria.

Demontração

Link do Fiddle

Obs: Nos exemplos criados no jsFiddle foi dado apenas 3.000 milisegundos = 3 segundos, para não ter que esperar 2 minutos para ver o funcionamento.

1

Sem uso de add-ons, você pode fazer um bloco de comandos assim:

(function()
{
    var mouse = {};
    // mouse.timer --> tempo para ação
    // mouse.moved --> callback quando o mouse é movido
    // mouse.action --> sua ação de 2 minutos
    mouse.action = function ()
    {
        // 2 minutos. Bye!
    };
    mouse.moved = function ()
    {
        if(mouse.timer)
            // O tempo já estava definido.
            clearTimeout(mouse.timer); // Então para.
        mouse.timer = setTimeout(mouse.action, 120000)
    };
    addEventListener("mousedown", mouse.moved); // ao segurar ou clicar
    addEventListener("mousemove", mouse.moved); // ao mover
    addEventListener("touchstart", mouse.moved); // ao tocar
    addEventListener("load", function ()
    {
        mouse.timer = setTimeout(mouse.action, 120000)
        // Já execute o tempo para ação quando a página carregar.
    });
    // Você pode acrescentar:
    // addEventListener("keydown", mouse.moved)
    // se quiser que o mesmo aconteça ao pressionar uma tecla.
})()

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .