'multithreading' setInterval functions (Javascript)

Question

I'm tasked with creating a progress bar (actually, a timer that looks like a progress bar) that will be triggered on a click event. I need multiple bars as a person may click on multiple elements that will trigger the progress bar. This is the script I have now:

function createPbar(IDofpBar, timeOut, timeIncrement ) {

            ...grab dom elements and do the math...

    i=0;
    var newWidth = 0;   

    var x = setInterval(function(){
        theBar.style.width = newWidth+"px"
        newWidth = newWidth + bIncrement;
        if (i == counter) {
            clearInterval(x);
        }
        i++
    }, timeIncrement*1000);

}

This works fine until I have more than one on the page at a time. When I trigger the second one, it affects the first one. I'm guessing it's due to reassigning the variables each time I trigger a new progress bar.

Is there a way to isolate the variables per call?

Matt Ball · Accepted Answer · 2011-03-30 00:02:38Z

4

Use var to declare variables within the scope of the current function, rather than in the global scope. You're missing a var before the i=0; statement. I don't see the code that initializes theBar, but you might be missing a var there, too.

function createPbar(IDofpBar, timeOut, timeIncrement ) {

    /* ...grab dom elements and do the math... */

    var theBar = ...,
        i=0,
        newWidth = 0;

    var x = setInterval(function(){
        theBar.style.width = newWidth+"px"
        newWidth = newWidth + bIncrement;
        if (i == counter) {
            clearInterval(x);
        }
        i++
    }, timeIncrement*1000);
}

Just in case: var keyword @ MDC.

answered Mar 30, 2011 at 0:02

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DA. Over a year ago

argh! Yep. That was the culprit.

Ben Zittlau · Accepted Answer · 2011-03-30 19:15:16Z

1

Matt's answer is correct, but I'll expand on it a bit further.

In javascript assigning a variable without using the var keyword creates the variable in the global scope. In your current code this means that all instances of your progress bar are going to be referencing and accessing the same instance of i.

By using the var keyword to declare variables inside of a function, it declares the variable to have local scope and makes it only accessible from within the function. This allows you to have independent versions of the variables used in your function.

This is a gotcha which I often find myself having to go back and fix when I forget.

edited Mar 30, 2011 at 19:15

answered Mar 30, 2011 at 0:11

Ben Zittlau

2,5152 gold badges23 silver badges30 bronze badges

2 Comments

DA. Over a year ago

I appreciate the explanation!

RobG Over a year ago

It's not correct though. Undeclared variables are created as properties of the global object when they are assigned values, attempting to use them before then will create a reference error like "i is not defined". Declaring variables means they are available before code execution begins, preventing such errors.

Collectives™ on Stack Overflow

'multithreading' setInterval functions (Javascript)

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related