Ryan Long Ryan Long - 3 months ago 13
CSS Question

How to call a function that is inside another function?

I'm trying to make a simple image slider in jQuery && JavaScript. I started to branch out and it more of a personal thing to figure out myself and ran in to this problem. I want to call the function

test
after changing the
var count
's value. Hopefully that would send out (in this case) the next image.

var sc;
var count;

setInterval(function test(){
$(".slider #"+count).show("slide",{direction:'right'},500);

$(".slider #"+count).delay(5500).hide("slide",{direction:'left'},500);

if(count==sc || count > sc || count <= 0) {
count=1;
}else{
count=count + 1;
}
}, 6500);

function slider(){
sc=$(".slider img").length;
count= 2;

$(".slider #1").show("fade", 500);
$(".slider #1").delay(5500).hide("slide",{direction:'left'},500);
}


function prev() {
count = count - 1;
test();
}
function next() {
count = count + 1;
test();
}


HTML:

<div class="wrapper">
<div class="slider">
<img id="1" src="images/Background.JPG"/>
<img id="2" src="images/Background2.jpeg"/>
<img id="3" src="images/background2.png"/>
<img id="4" src="images/profilePicture.jpg"/>
</div>

<a href="#" class="left" onclick="prev(); return false;">Previous</a>
<a href="#" class="right" onclick="next(); return false;">Next</a>

</div>

Answer

In order to access it from outside the function in which it is defined (the scope in which it was defined), you have to have a reference to it that exists in a scope which is visible to the code in which you desire to access it.

The most common way to do this is to define the function which you want to call from multiple places in a scope which is visible to all places from which you wish to call it. For example:

var count;
function test(){
    //Do stuff
}

function slider(){
    //code
    setInterval(test, 6500);
}

function prev() {
  count = count - 1;
  test();
}

function next() {
  count = count + 1;
  test();
}

An alternate method, but a bit unusual, of accomplishing the same thing would be:

var intervalFunction;

function slider(){
    //code
    setInterval(intervalFunction = function test(){
        //Do stuff
    }, 6500);
}

function prev() {
  count = count - 1;
  intervalFunction();
}

function next() {
  count = count + 1;
  intervalFunction();
}
Comments