CODEWITHSUNDEEP
javascripthtmlcss
Keivan Sabil...
Keivan Sabil...

Reputation: 95

setInterval() function is not working

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>

Upvotes: 0

Views: 94

Answers (3)

T.J. Crowder
T.J. Crowder

Reputation: 1074305

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.

Upvotes: 2

its_notjack
its_notjack

Reputation: 323

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/

Upvotes: 1

Gianluca Colombo
Gianluca Colombo

Reputation: 819

change this line 

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

with the new one

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

Upvotes: 0

Related Questions