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?

score 5 · Answer 1 · answered Aug 27 '11 at 06:34

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 '11 at 06:34

Darin Dimitrov

1,023,142
271
3,287
2,928

score 4 · Answer 2 · edited May 23 '17 at 11:56

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.)

score 3 · Answer 3 · answered Jul 04 '12 at 08:36

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 04 '12 at 08:36

praveenpds

2,936
5
26
43

2

You should add a description to your answer, rather than just posting code. – Kyle Trauberman Oct 11 '12 at 05:01

score 2 · Answer 4 · answered Mar 03 '15 at 22:05

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();

it works good but i takes 2 sec to execute that func. too late — Thamaraiselvam, Mar 29 '15 at 15:48

praveenpds · Answer 5 · 2012-07-04T08:12:42.730

1

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

StopAll();

edited Jul 04 '12 at 08:12

answered Jun 28 '12 at 05:41

praveenpds

2,936
5
26
43

score 0 · Answer 6 · answered Aug 27 '11 at 06:39

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.

score 0 · Answer 7 · answered Aug 27 '11 at 06:44

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

Calling nested function using javascript

7 Answers7