开发者

Calling nested function using javascript

开发者 https://www.devze.com 2023-03-31 17:09 出处:网络
I have this code which calls a function test() onbody onload <body onLoad=\"test();\"> The Test function has 2 more functions drawLayers() ,StopAll().

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));
        time开发者_运维百科rs.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?


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.


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


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


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


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

StopAll();


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.


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

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号