1

I'm not that great with javascript and i found this perfect fiddle that i'd like to use here:

http://jsfiddle.net/5w5ku/1/

The problem I have is that I am trying to make it so that it lasts ten minutes.

I've tried tweaking the code but I can't get it to be 10 minutes. I'm very grateful to all that can help.

Here's the Javascript:

var progress = setInterval(function () {
    var $bar = $('.bar');

    if ($bar.width() >= 400) {
        clearInterval(progress);
        $('.progress').removeClass('active');
    } else {
        $bar.width($bar.width() + 40);
    }
    $bar.text($bar.width() / 4 + "%");
}, 800);

Thanks v much

cvrebert
  • 9,075
  • 2
  • 38
  • 49
Henry
  • 5,195
  • 7
  • 21
  • 34

3 Answers3

2

Version 1 (not so reliable, see @flup's comments)

some things to think through

you want your progress to take 10 minutes which is 600 seconds or 600.000 milliseconds.

1000 * 60 * 10 = 600.000

when your bar width is 400px (100%) you can at most do 400 steps (there isnt a smaller unit than 1px)

so if i divide 600.000ms / 400 steps, i get 1500ms, which means i should add every 1.5s one pixel. which sounds quite good.

600.000 / 400 = 1500

that would result in a code like this:

var progress = setInterval(function () {
    var $bar = $('.bar');

    if ($bar.width() >= 400) {
        clearInterval(progress);
        $('.progress').removeClass('active');
    } else {
        $bar.width($bar.width() + 1); // add only 1px per step
    }
    $bar.text($bar.width() / 4 + "%");

}, 1500); // wait 1500ms per step

EDIT

Version 2

result of the discussion (thanks @flup) is the probably most reliable version (if you want to reach the 10 mins as accurate as possible):

var mins = 10; //change this to increase or decrease minutes
var tenMinsInMillis = 1000 * 60 * mins;
var finishedTS = (new Date()).getTime() + tenMinsInMillis;
var $bar = $('.bar');
var progressInterval = 1000;
var now, remaining, pWidth;

var setBar = function (pWidth) {
    $bar.width(pWidth + '%');
    $bar.text(Math.floor(pWidth) + "%");
};

var progress = setInterval(function () {
    now = (new Date()).getTime();
    remaining = finishedTS - now;
    pWidth = 100 - (remaining * 100 / tenMinsInMillis);

    setBar(pWidth);

    if (remaining < progressInterval) {
        clearInterval(progress);
        setTimeout(function () {
          setBar(100);
          $('.progress').removeClass('active');
        }, remaining);
    }

}, progressInterval);

http://jsfiddle.net/jLu8S/1/

(note, that i set the duration (var mins) to 1 minute, that you don't have to wait 10 mins in the fiddle...)

hereandnow78
  • 14,094
  • 8
  • 42
  • 48
  • The timing of setInterval is not very reliable and this way you'll be adding roundoff errors with each time the function runs. – flup Aug 01 '14 at 23:47
  • so please tell me how tamil's solution is any better (regarding the interval). he is using a fixed interval of 1s, which ends up in excactly the same interval-problems. __IF__ OP really wants his animation to almost excactly(!) end after 10 mins, the interval-duration needs to be dynamic (at least the last one). a 100% excact animation which ends EXACTLY after 10 mins is just not possible... the only thing which is really better in tamils solution is the percentage-calculation of the progress-bar, but this does not justify a downvote of my answer... my 2 cents – hereandnow78 Aug 04 '14 at 08:28
  • At the start, Tamil retrieves and remembers the exact start date, so at each time the value of `elapsed` contains the exact amount of elapsed millis. – flup Aug 04 '14 at 09:31
  • yes, you're right. but the problem will stay the same. just log out "elapsed" on the end, and you will see what i mean... tamils solution is just one iteration better (which is not a reason to downvote my answer...) – hereandnow78 Aug 04 '14 at 15:02
  • Assume the system is busy and the setInterval consistently slow. Then his answer will reach 100 percent at at most than 1 second plus the tardiness of *one single* setInterval call. This answer will be delayed by the accumulated tardiness of *all* setInterval calls. See also http://stackoverflow.com/questions/8173580/setinterval-timing-slowly-drifts-away-from-staying-accurate – flup Aug 04 '14 at 15:36
  • Well, if you'd update the code your answer, that'd make it the best answer in my eyes. – flup Aug 04 '14 at 15:54
  • done, i left both versions with the hint to this (useful) discussion – hereandnow78 Aug 04 '14 at 15:59
2

Check this out!

var date = (new Date()).getTime();
var mins = 10;//change this to increase or decrease minutes
var tenMinsInMillis = 1000 * 60 * mins;

var progress = setInterval(function () {
    var $bar = $('.bar');
    var now = (new Date()).getTime();
    var elapsed = now - date;
    var pWidth = (elapsed / tenMinsInMillis) * 100;
    if (elapsed >= tenMinsInMillis) {
        clearInterval(progress);
        $bar.width('100%');
        pWidth = 100;
        $('.progress').removeClass('active');
    } else {
        $bar.width(pWidth + '%');
    }
    $bar.text(Math.floor(pWidth) + "%");
}, 1000);
0

Try this fiddle: http://jsfiddle.net/8F492/1/

var progress = setInterval(function () {
    var $bar = $('.bar');

    if ($bar.width() >= 400) {
        clearInterval(progress);
        $('.progress').removeClass('active');
    } else {
        $bar.width($bar.width() + 0.66666666666);
    }
    $bar.text($bar.width() / 4 + "%");
}, 1000);

I made it run every second and the total width was 400 so I divided that by 600 (because there's 600 seconds in 10 minutes) which gave me 0.66666666666. I made it increment by 0.66666666666 instead and it looks like it should count up to ten minutes.

jezztech
  • 11
  • 1
  • Same here. The timing of setInterval is not very reliable. It's better to do it like Tamil suggests, and keep track of the start time of the timer. – flup Aug 01 '14 at 23:49