asked on

Timing in Jquery / JavaScript

Hi E's, I need to know how I count the time in Jquery or in JavaScript.
I create a picture puzzle game, and I want to count the time that the client need to finish the puzzle.
For that, I thing I have to start the time and put the code in the beginning of my script, and for finish I need other code to put in the end of my script.
How I made that?

The best regards, JC

Randy Downs

Maybe this will help. It uses a function called after a delay, and cancelled it if mouseleave:

http://stackoverflow.com/questions/7875994/jquery-timer-function

(function() {
    var timer = 0; // 0 is a safe "no timer" value

    $('#object').live('mouseenter', function() {
        // I'm assuming you don't want to stomp on an existing timer
        if (!timer) {
            timer = setTimeout(doSomething, 1000); // Or whatever value you want
        }
    }).live('mouseleave', function() {
        // Cancel the timer if it hasn't already fired
        if (timer) {
            clearTimeout(timer);
            timer = 0;
        }
    })

    function doSomething() {
        // Clear this as flag there's no timer outstanding
        timer = 0;

        // Do your stuff
    }

})();

Open in new window

Another one here - http://code.google.com/p/jquerytimer/

Pedro Chagas

ASKER

Hi @Number-1, I thing what I needed is something more simple. First I thing, I don't need to work with any events.
I will show entire code for a better understanding:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <link href="estilo/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="jquery.min.js"></script>
  <script src="jquery-ui.min.js"></script>
  <meta charset="utf-8">
    <style>
    #geral {position: relative; margin-left: 200px; margin-top: 200px; width: 500px; height: 500px; /*background-color: yellow;*/ z-index: 1;}
    #draggableum { position: absolute; width: 200px; height: 200px; color: green; z-index: 3; background-image: url('imagem/im1.jpg');}
    #droppableum { position: absolute; width: 200px; height: 200px; margin-left: 250px; margin-top: 250px; z-index: 2; color: white; font-weight: bold; background-color: gray;}
    .ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary { opacity: 1; 
    filter:Alpha(Opacity=100); font-weight: normal; }
    .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: 1; filter:Alpha
    (Opacity=100); background-image: none; }
    </style>
    <script>
    var contador = 0;
    function verifica()
{
    if(contador > 0){
   alert('acabou de colocar a peça');
    }
}
    $(function() {
        $( "#draggableum" ).draggable();
        $( "#droppableum" ).droppable({ 
            drop: function( event, ui ) {
                $( this )
                    .find( "p" )
                        .html( "Dropped!" );
                        var medeum = $("#draggableum");
                        var posicaolum = medeum.position().left;
                        var posicaotum = medeum.position().top;
                        var distancialum = 250 - posicaolum; 
                        var distanciatum = 250 - posicaotum;
                        contador++;
                        $("#result").html(contador); 
                        $("#draggableum").css("margin-left", distancialum);
                        $("#draggableum").css("margin-top", distanciatum);
                        $("#draggableum").draggable({ disabled: true });
                        verifica();

            }
        });
    });
    </script>
</head>
<body>
<div id="result">...</div>
<div id="geral">
    
<div id="draggableum">
    <!--<p>.</p>-->
</div>

<div id="droppableum">
    <!--<p>Drop here</p>-->
</div>

</div>
</body>
</html>

Open in new window

What this code do: It´s a simple drag and drop that will show a alert when the element droped.
I need to start the time when the script begins, and the finish when the element drop, in this part of the code:

 function verifica()
{
    if(contador > 0){
   alert('acabou de colocar a peça');
    }
}

Open in new window

Can you give a solution please.

The best regards, JC

Randy Downs

Maybe create a start time in your function verifica then start a simple timer ending with drop: function

Some good advice in here.

http://stackoverflow.com/questions/10797820/not-accurate-settimeout-and-it-works-only-on-mousedown

you're gonna see inaccuracy of between 15ms and 45ms in IE7 depending on other JS executions on the page.

Simple timer - http://code.google.com/p/jquerytimer/

jQuery.fjTimer({
        interval: 1000,
        repeat: 5,
        tick: function(counter, timerId) {
                alert("tick:" + counter);
        }
});

Open in new window

Simple timer also has a function property you could use to show your alert.

jQuery.fjFunctionQueue(function() {alert("a")});}}}
==Configuration==
{{{jQuery.fjFunctionQueue({
        interval: 1,
        onStart: function(){ alert("start")},
        onComplete: function(){alert("complete!"},
        autoStart: false,
        tick: function(index, func) {func();},
});

Open in new window

Pedro Chagas

ASKER

Hi, I try but not work, can you please exemplify in my code?

The best regards, JC

SOLUTION

Randy Downs

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION