CODEWITHSUNDEEP
javascript
user1469270
user1469270

Reputation:

Log the time in between user - a simple timer

I'm trying to create a simple timer.

The user presses a 'start' button. When the user presses another button, I would like to log the time in between.

Could this be achieved with setTimeout?

Upvotes: 0

Views: 102

Answers (3)

magritte
magritte

Reputation: 7636

You can just use the Date.now() method, there's no need to instantiate a new Date object each time.

Here's a jsFiddle that measures lap times as an example: http://jsfiddle.net/ZpFnp/

HTML

<button id="start">start/reset</button>
<button id="stop">lap</button>
<div id="output"></div>

JavaScript

var startTime = Date.now();

document.getElementById("start").addEventListener("click", function () {
    document.getElementById("output").innerHTML = "";
    startTime = Date.now();
});

document.getElementById("stop").addEventListener("click", function () {
    var elapsedTime = Date.now() - startTime;
    document.getElementById("output").innerHTML += "<p>" + elapsedTime  + "</p>";
});

Upvotes: 0

k0pernikus
k0pernikus

Reputation: 66679

It's really not necessary to use a Timeout for this. All you want to do is measuring two difference between two time dates.

HTML: 

<span class="startTimer">
    Start Timer
</span>

<span class="stopTimer">
    Stop Timer
</span>

<span class="result">
</span>

JS, and no, the use of JQuery is not needed here but I like the way it handles events:

(function($){
    var Timer = {
        startTimeInMs: null,
        endTimeInMs: null,
        start: function(){
            this.startTimeInMs = new Date();
        },
        stop: function(){
            this.endTimeInMs = new Date();
        },
        getTime: function(){
            return this.endTimeInMs - this.startTimeInMs;
        },
        bind: function() {
            var self = this;

            $('.startTimer').on('click', function(){
                self.start();
            });

            $('.stopTimer').on('click', function(){
                self.stop();
                self.printResult();
            });
        },
        printResult: function() {
            $(".result").html(this.getTime())
        },
        init: function(){
            this.bind();
        }
    }

    var timer = Object.create(Timer);
    timer.init();
})(jQuery);

Upvotes: 0

Hope4You
Hope4You

Reputation: 1947

setTimeout shouldn't be used for your situation. The following is a method to display the amount of seconds between clicking "startBtn" and then clicking "endBtn":

var date1 = new Date();
document.getElementById("startBtn").onclick = function(){
   date1 = new Date();
}
document.getElementById("endBtn").onclick = function(){       
    var date2 = new Date();
    var dif = date1.getTime() - date2.getTime();
    var Seconds_from_T1_to_T2 = dif / 1000;
    var Seconds_Between_Dates = Math.abs(Seconds_from_T1_to_T2);
    alert(Seconds_Between_Dates);
}

You can build from here to get your desired functionality (for example, if the user clicks "endBtn" before clicking "startBtn", the results are inaccurate, of course. You can fix by disabling buttons as needed, etc.) (thanks to How Many Seconds Between Two Dates?)

Upvotes: 4

Related Questions