CODEWITHSUNDEEP
javascriptjquerytimercounter
Scott Krieger
Scott Krieger

Reputation: 31

Increasing Values Over A Time Period JS

Okay so in relation to my last question. I currently have this code: 

var secs = 100;
setInterval(function() {
    var $badge = $('#nhb_01');
    $badge.text((parseFloat($badge.text())+0.01).toFixed(2));
}, secs);

Basically, I need the counter to increase by a certain value every minute.

So one of the values I need is 0.17.

So I need the counter to increase by 0.17 every minute. So after 2 minutes, the counter will read 0.34 and so on.

How would I go about this, because working out how many milliseconds it should take over the minute is becoming such a pain and confusing!

Thank you for any help!

Demo.

Upvotes: 2

Views: 4070

Answers (5)

Joshua Pinter
Joshua Pinter

Reputation: 47481

Increment from Starting Value to Ending Value Over Duration with a Given Framerate.

Inspired heavily by @Dan-Levi Tømta's answer.

HTML

<h2>Increment Value over a Duration with a given framerate</h2>
Value: <span id="value">0</span>

JS

var valueElement = document.getElementById('value');

var start     = 0;
var end       = 100;
var duration  = 10000; // In milliseconds (divide by 1000 to get seconds).
var framerate = 50;    // In milliseconds (divide by 1000 to get seconds).

var toAdd = ( ( end - start ) * framerate ) / duration;

var interval = setInterval(function() {
    var currentValue = parseFloat(valueElement.innerHTML);

  if (currentValue >= end) {
      clearInterval(interval);
    return;
  }

    valueElement.innerHTML = (!isNaN(currentValue) == true ? currentValue + toAdd : toAdd);
}, framerate);

jsFiddle

https://jsfiddle.net/L3Ln1f7b/

From this base, you can do a lot. Adjusting framerate helps with performance issues and duration allows you to speed things up or slow things down

Upvotes: 0

Dan-Levi T&#248;mta
Dan-Levi T&#248;mta

Reputation: 846

The setInterval takes the last arguments in this setup as milliseconds, and it should be an easy equation: 1000 milliseconds * 60 = 1 minute

So make a variable that is just that:

var ms = 1000 * 60;

Now you have to define how much you want to add to a certain value

var toAdd = 0.17;

Here are som basic markup for an example

<!DOCTYPE html>
<html>
    <head>
        <title>Increasing a number with setInterval</title>
    </head>
    <body>
        <h2>Increasing a number with setInterval</h2>
        Number: <span id="counter"></span>
    </body>
</html>

And here are som commented JavaScript with the variables we just made

    // make a reference to the element which should hold the updated value
    var counterElem = document.getElementById('counter');
    // define a variable with the value you want to add to
    var toAdd = 0.17;
    // define the interval for the task. I made this frequency faster for demonstration purpose.
    var ms = 10 * 60;
    //now make the setInterval
    setInterval(function() {
        // parse the innerHTML to a float
        var count = parseFloat(counterElem.innerHTML);
        // Check that the count variable actually is a number and add the toAdd and the count together, and if not just add the initial value to id (0.17) because then it is probably the first time the interval checks the element.
        counterElem.innerHTML = (!isNaN(count) == true ? count + toAdd : toAdd);
    }, ms);

Here is an example of the script in use: https://jsfiddle.net/whyyc81a/

Upvotes: 0

Xion Dark
Xion Dark

Reputation: 3434

If you're keeping track of the time elapsed, here is a function that will give you the value of the badge given a rate of increase and time elapsed. Just call it periodically when you update the value displayed on the badge.

function calcIntervalValue(ratePerMinute, elapsedTimeInMilliseconds) {
  var elapsedTimeInMinutes = elapsedTimeInMilliseconds / 60000; //60000 miliseconds in a minute
  return ratePerMinute * elapsedTimeInMinutes
}

var twoMinutes = 120000 //in milliseconds
alert( calcIntervalValue(0.17, twoMinutes) )

Upvotes: 0

rrk
rrk

Reputation: 15846

var secs = 60 * 1000;
setInterval(function() {
    var $badge = $('#nhb_01');
    $badge.text((parseFloat($badge.text())+0.17).toFixed(2));
}, secs);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="nhb_01">0</div>

Upvotes: 0

Andy
Andy

Reputation: 63524

Instead of grabbing the text from the element each time it would be slightly better (more efficient) to just keep a JS counter incremented instead:

var secs = 1000 * 60;
var count = 0;
setInterval(function() {
    var $badge = $('#nhb_01');
    count += 0.17;
    $badge.text(count.toFixed(2));
}, secs);

DEMO - runs a little faster than normal so you can see the effect.

Upvotes: 1

Related Questions