0

According to my code , I should stop when I count up to 60% but the counter will continue counting higher than 60%. I should stop at 60%, but instead I count on forever! What should I do to solve this problem?

 var i = 0;
 function counter(tag_name, precent, varname) {
     i++;
     $(tag_name).html(i + "%");
     if (i == precent) clearInterval(varname);
 }
 var p1 = setInterval(function () {
     counter("#p1", 60, p1);
 }, 50);
 var p2 = setInterval(function () {
     counter("#p2", 60, p2);
 }, 50);
var p3 = setInterval(function () {
     counter("#p3", 60, p3);
 }, 50);
div {
    border:solid 1px black;
    margin:1px;
    width:50px;
    height:30p;
    float:left;
}
#m1, #m2, #m3 {
    width:200px;
    height:60px;
    float:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="m1">
    <div id="b1">d1</div>
    <div id="p1">%</div>
</div>
<div id="m2">
    <div id="b2">d2</div>
    <div id="p2">%</div>
</div>
<div id="m3">
    <div id="b3">d3</div>
    <div id="p3">%</div>
</div>

2
  • 3
    use >= percent instead of ==percent, it rolls overs after the 2nd and 3rd copy hit...
    – dandavis
    Oct 29, 2014 at 8:50
  • 1
    The problem is, that you use 1 variable I, and you call it 3 times, that's why you'll get 60, 61, and 62 as result.
    – Nick
    Oct 29, 2014 at 9:00

3 Answers 3

2

A couple of issues there:

  1. clearInterval(varname); will call clearInterval with the argument varname, which is the value of the variable you pass in as of when you pass it, not later when you're looking at it (because the value of, say, p1, is read and then passed into the function). Although you could fix that by using properties of an object and passing the property name, there's a better way.

  2. All of your counters share the same i variable, so at the very least you can't stop at i == precent because only one of the three will ever see that. It also makes the counters increment oddly.

  3. It's "percent," not "precent". :-)

I would use separate i variables, have counter manage things itself, and probably use a chain of setTimeout rather than setInterval:

function counter(tag_name, percent) {
    var i = 0;

    run();

    function run() {
        i++;
        $(tag_name).html(i + "%");
        if (i < percent) {
            setTimeout(run, 50);
        }
    }
}
counter("#p1", 60);
counter("#p2", 60);
counter("#p3", 60);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>

But if you want them to share i, you could use properties as I mentioned earlier:

var i = 0;
var handles = {};

function counter(tag_name, percent, propname) {
    i++;
    if (i >= percent) clearInterval(handles[propname]);
    if (i <= percent) $(tag_name).html(i + "%");
}
handles.p1 = setInterval(function () {
    counter("#p1", 60, "p1");
}, 50);
handles.p2 = setInterval(function () {
    counter("#p2", 60, "p2");
}, 50);
handles.p3 = setInterval(function () {
    counter("#p3", 60, "p3");
}, 50);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>

That works because in JavaScript, you can refer to a property using either dot notation and a literal property name (obj.foo), or brackets notation and a string property name (obj["foo"]).

I would tend to go with the first example, though.

0
1

First of all, change == precent to >= precent then, under if (i >= precent) clearInterval(varname);, add if (i >= precent) $(tag_name).html(precent + "%"); This solves the problem and works as expected.

I have a fiddle at http://jsfiddle.net/0rukk816/1/

1
0

change this line

if (i == precent) clearInterval(varname);

with the new one

if (i >= precent) clearInterval(varname);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.