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

JavaScriptjQuery

Last Comment

Albert Van Halen

8/22/2022 - Mon

Randy Downs

7/4/2012

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

7/4/2012

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

7/4/2012

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

I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst

William Peck

Pedro Chagas

7/4/2012

ASKER

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

The best regards, JC

SOLUTION

Randy Downs

7/4/2012

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.