Exemplo de Timer com JQuery

Vamos imaginar um cenário: você esta desenvolvendo uma “prova” e o aluno pode passar o tempo que quiser fazendo a prova e você não pode perder a sessão desse aluno, como resolver esse problema?

Uma solução para esse problema é notificar o servidor de tempos em tempos com chamadas AJAX enquanto o aluno estiver fazendo a prova.

Fazer uma notificação de tempos em tempos ao servidor não é uma tarefa das mais difíceis, você pode utilizar as funções “setTimeout” e “setInterval” , mais pesquisando um pouco encontrei um plugin do JQuery chamado “epiclock” que deixou o que era fácil mais fácil ainda, veja aqui o link do plugin http://code.google.com/p/epiclock/ .

Para montar esse exemplo vou utilizar ASP.NET MVC, mais você poderia utilizar ASP.NET sem problema nenhum, para começar baixe o plugin nesse link http://code.google.com/p/epiclock/downloads/list é adicione o arquivo “jquery.epiclock.min.js” na pasta “Scripts” e o “epiclock.css” na pasta “Content”, feito isso altere a View “Index” do Controller "Home", veja o código abaixo.

Imagem 1 - Código da View "Index".

A View acima possui duas DIVs uma que será utilizada pelo plugin e outra para receber o resultado do servidor, ela também adiciona o arquivo JavaScript do plugin “jquery.epiclock.min.js” e o arquivo CSS “epiclock.css”, a framework do JQuery “jquery-1.3.2.min.js” e o arquivo “Clock.js”, que esta definido no código abaixo.

JavaScript

$(document).ready(function() {
    //Configuração do plugin
    $('#clockExemplo1').epiclock({ 
        mode: EC_LOOP,
        format: 's {segundos para próxima solicitação.}',
        offset: { seconds: 5 },
        onTimer: clock_onTimer
    });

    //Inicia a contagem
    $.epiclock();
});

function clock_onTimer() {
    //Chamada AJAX
    $.post("/Home/Timer", clock_callback);
}

function clock_callback(mensagem) {
    //Callback da chamada AJAX
    $("#resultado").after("
" + mensagem);
}

Na função “ready” configuro 4 propriedades do plugin mode,format,offset e onTimer.

mode: defini o comportamento, no exemplo acima será um loop.

format: o conteúdo dentro das chaves define o texto que será exibido ao usuário é o ‘s ‘ define que os segundos será exibido para o usuário , você pode utilizar ‘h’ para horas e ‘m’ para minutos.

offset: define o intervalo do loop , o exemplo acima defini 5 segundos , você pode definir o tempo em minutos {minutes: 1} ou horas {hours:1}.

onTimer: recebe a função que será executada a cada loop, no exemplo acima a função “clock_onTimer” é chamada a cada 5 segundos.

A função “clock_onTimer” faz uma chamada ao servidor via Post e o alvo dessa chamada é a Action “Timer” do Controller “Home”, o callback dessa chamada e a função “clock_callback” que recebe o resultado do servidor e adiciona dentro da DIV “resultado”.

Vamos agora definir a Action “Timer”, adicione o código abaixo no Controller “Home”.

public ActionResult Timer()
{
    this.Session["mensagem"] = String.Format("A última consulta ao servidor foi às : {0}",
            DateTime.Now.ToLongTimeString());

    return this.Content(this.Session["mensagem"].ToString());
}

A Action simplesmente adiciona uma mensagem na sessão é retorna essa mensagem, agora você pode rodar a aplicação, veja o resultado esperado na imagem abaixo.

Imagem 2 - Resultado esperado.

Conclusão

O plugin “epiclock” tem outros recursos que eu achei legal você pode dar uma olhada nesse link http://eric.garside.name/demo.html?p=epiclock , só lamento o fato de não existir documentação até a data de publicação desse post , nesse link você vai encontrar somente exemplos eu testei todos e não encontrei nenhum problema.Baixe o fonte de exemplo.

Daniel Fonseca Castro

Currently rated 5.0 by 3 people