Initiating, halting, and rejuvenating a timer in JavaScript

Question

Initiating, halting, and rejuvenating a timer in JavaScript

Here is a simple code snippet where I'm experimenting with starting, stopping, and resetting a JavaScript timer.

The goal is to have a timer running on a page that sends a message once it reaches the end of its countdown before restarting. The stop button should halt the timer indefinitely.

The code in the provided fiddle achieves this functionality, but I am unsure if I am approaching it correctly. Is using setTimeout the most effective way to create such a timer, or would setInterval be better?

Additionally, my current reset function looks like this:

var onReset = function() {
        clearTimeout(timerHandle);
        onStart();    
};

Is there a more elegant method to reset a timer in JavaScript?

Any insights are appreciated!

javascript

Answer 1

Answer №1

If you want to improve your code, consider encapsulating it all in an object. Let me know if you need an example. Alternatively, you can keep the existing structure and simply update your onStart function as shown below to eliminate some unnecessary code:

var onStart = function() {

    timerHandle = setInterval(function() {
        $("#console").append("timer fired.. <br />");
    }, 2000);

};

Check out this fiddle for a demonstration: http://jsfiddle.net/qx6CM/

Answer 2

If you want to improve your code, consider encapsulating it all in an object. Let me know if you need an example. Alternatively, you can keep the existing structure and simply update your onStart function as shown below to eliminate some unnecessary code:

var onStart = function() {

    timerHandle = setInterval(function() {
        $("#console").append("timer fired.. <br />");
    }, 2000);

};

Check out this fiddle for a demonstration: http://jsfiddle.net/qx6CM/

Initiating, halting, and rejuvenating a timer in JavaScript

Answer №1

Similar questions

Encountering a script error when upgrading to rc4 in Angular 2

Issues with Promise execution sequence in ExpressJS Middleware

The button labeled "issett" is malfunctioning

What causes a Module Error to occur in my AngularJS application when I attempt to include multiple routes?

The Google Maps feature encountered an error (ReferenceError: google is not defined)

Using javascript, hide or show a div without using jquery or the display:none property

Ways to access information from doc.data()

Encountering issues with Node-persist on a complex Node.js application leading to missing return

This function appears to have an excessive number of statements, totaling 41 in total

Generating exportable dynamic code in Javascript

Learn how to dynamically activate an icon in Angular to enhance user interaction

How to send parameters through the Google Maps API URL using Vue.js

Transforming a value within a controller into a directive

Tips for controlling the size of a textarea in jQuery to prevent it from expanding further

extracting ng-repeat values and passing them to the controller

Eliminate duplicate entries in typeahead.js by ensuring unique data sources for both prefetch and remote

The ngOnChanges method fails to exhibit the anticipated modifications in a variable

JavaScript code that retrieves an array containing only the deleted images from the information obtained from the edit product page

Interactive hover effect in JavaScript displays a larger version of other thumbnails when hovering over a dynamically loaded thumbnail image, instead of its own full-size image

Protractor Mastery: The Ultimate Guide to Stretching and Replacing Elements