Function not defined using setTimeout

Question

For some reason after I wrapped my js code in an immediately invoked function expression I'm getting progressBar not defined. Wondering why this is the case?

(function(){
    "use strict"

    var progressBar = function(){
        var bar = document.getElementById('pbar'),
        status = document.getElementById('status'),
        barValue = bar.value;

        status.innerHTML = barValue + "%";
        bar.value++;

        var increment = setTimeout("progressBar()", 50);
        if(bar.value == 100){
            status.innerHTML = '100% - Straight Besting';
            bar.value = '100';
            clearTimeout(increment);
        }
    }

    progressBar();

})()

noahnu · Accepted Answer · 2017-05-22 02:23:53Z

6

When you pass a string to setTimeout, it is invoked in the context of the global window object.

Change the setTimeout line to:

var increment = setTimeout(progressBar, 50);

E.g.

(function() {
   let i = 0;
   let myfunction = function() {
      console.log(i++);
      if (i < 10) setTimeout(myfunction, 100);
   };

   myfunction();
})()

edited May 22, 2017 at 2:23

answered Jan 19, 2017 at 22:28

noahnu

3,6242 gold badges22 silver badges40 bronze badges

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

2 Comments

Seena Khoee Over a year ago

Thats interesting, why is that the case? Why when a function passed as a string into setTimout first arg, it is invoked in the context of the global not wihtin the scope?

noahnu Over a year ago

It's because setTimeout is actually window.setTimeout. When you pass a string, you're actually passing in a string of "code" to execute, just like eval. The "code" does not contain any contextual information.

Collectives™ on Stack Overflow

Function not defined using setTimeout

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related