Calling nested function using javascript

Question

I have this code which calls a function test() on body onload

<body onLoad="test();">

The Test function has 2 more functions drawLayers() ,StopAll().

function test() {

  function drawLayers() {
   timers = [];
        timers.push(setTimeout(drawMoon,800));
       timers.push(setTimeout(drawCircle1,2300));
        timers.push(setTimeout(drawCircle2,2700));
    timers.push(setTimeout(drawCircle3,3100));
        timers.push(setTimeout(drawCircle4,3500));
        timers.push(setTimeout(drawCircle5,3900));
        timers.push(setTimeout(drawtext2,4300));
        timers.push(setTimeout(drawtext,4700));
        timers.push(setTimeout(drawtext3,5100));
        timers.push(setTimeout(drawtext4,5500));
        timers.push(setTimeout(drawtext5,5900));
        timers.push(setTimeout(drawtext6,6300));
        timers.push(setTimeout(drawtext7,6700));
        timers.push(setTimeout(drawtext8,7100));
        timers.push(setTimeout(drawtext9,7500));
        timers.push(setTimeout(drawtext10,7900));



    }

 function StopAll() {
     alert('fsdfsdf');
        for (var i = 0; i < timers.length; i++)
             window.clearTimeout(timers[i]);
    }
}

What i want to do is Call the StopAL() function on click of a button, the html code looks like below

<a href="javascript:void(0);" onClick="StopAll();">

Its throwing error, "StopAll is not defined"

How do i call the StopALL() function?

Darin Dimitrov · Accepted Answer · 2011-08-27 06:34:45Z

5

The scope of those nested functions is restricted to the test function only. You cannot invoke them from the outside. If you need to do that you could externalize it from the test function.

answered Aug 27, 2011 at 6:34

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 11:56:49Z

4

This is a 'closure' problem. The function StopAll is within the scope of the test function, and therefore is undefined in the global scope in which you are trying to call it.

Closures are a tricky subject to grasp initially. There's a good explanation here: How do JavaScript closures work?

(by the way StopAll should really be called stopAll because capitalised functions are generally reserved for use with the new keyword.)

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Aug 27, 2011 at 6:38

hellosmithy

2791 silver badge9 bronze badges

Comments

praveenpds · Accepted Answer · 2012-07-04 08:36:53Z

3

test = function (){

  this.drawLayers = function() {
        this.timers = [];
        this.timers.push(setTimeout(drawMoon,800));       
    }

  this.StopAll = function() {
       alert('fsdfsdf');
        var t = timers.length
        for (var i = 0; i < t; i++)
             window.clearTimeout(this.timers[i]);
    }
}

 var testObj =  new test();
 testObj.StopAll()

answered Jul 4, 2012 at 8:36

praveenpds

2,9265 gold badges28 silver badges44 bronze badges

1 Comment

Kyle Trauberman Over a year ago

You should add a description to your answer, rather than just posting code.

Kundan Bharadwaj · Accepted Answer · 2015-03-03 22:05:22Z

2

function test() {

    function drawLayers() {
        timers = [];
        timers.push(setTimeout(drawMoon,800));
        timers.push(setTimeout(drawCircle1,2300));
        timers.push(setTimeout(drawCircle2,2700));
    }

    var StopAll=function() {
        alert('fsdfsdf');
        for (var i = 0; i < timers.length; i++)
            window.clearTimeout(timers[i]);
    }
    return StopAll;
}
var obj= new test();
//to call StopAll function
obj();

answered Mar 3, 2015 at 22:05

Kundan Bharadwaj

213 bronze badges

1 Comment

Thamaraiselvam Over a year ago

it works good but i takes 2 sec to execute that func. too late

praveenpds · Accepted Answer · 2012-07-04 08:12:42Z

1

(function test($) {
  function drawLayers() {  
  }
  //expose this to outside world ,public function
  $.StopAll = function() {
    alert('fsdfsdf');
  }
})(window);

StopAll();

edited Jul 4, 2012 at 8:12

answered Jun 28, 2012 at 5:41

praveenpds

2,9265 gold badges28 silver badges44 bronze badges

Comments

Headshota · Accepted Answer · 2011-08-27 06:39:37Z

0

You'd better not use html attributes to bind event handler, you can do the same with the following code:

    window.onload = function(){
      document.getElementById("myLink").onclick = function(){
        StopAll();    
      }    
    }


  // Your functions

This way you'll ensure your dom is loaded and ready to call event handlers.

answered Aug 27, 2011 at 6:39

Headshota

21.4k13 gold badges63 silver badges82 bronze badges

Comments

Dhepthi · Accepted Answer · 2011-08-27 06:44:07Z

0

You can move the function StopAll() outside the test function and call it as specified. If suppose you need to access that function even in the test(), you can do like this

function test() {

.....
drawLayers();
StopAll() ;

}

function StopAll() {
     alert('fsdfsdf');
        for (var i = 0; i < timers.length; i++)
             window.clearTimeout(timers[i]);
    }

Declaration of function can be given outside and called any where you want

answered Aug 27, 2011 at 6:44

Dhepthi

4534 silver badges11 bronze badges

Collectives™ on Stack Overflow

Calling nested function using javascript

7 Answers 7

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related