另一个函数内部的函数不起作用

Question

So I have this code: http://jsfiddle.net/7rGSb/1/

var volumeDiv = document.getElementById("volumeNumber");
var volumeOld = 8;
var volumeNew = 37;
var timeNew = (1000 / (volumeNew - volumeOld));
changeVolume();

function changeVolume() {
    volumeDiv.innerHTML = volumeOld;
    volumeOld++;
    if (volumeOld <= volumeNew) setTimeout(changeVolume, timeNew);
};​

it's a string going from 8 to 37 in 1 second. It is working fine.

However when I try to put it into a click event handler ( http://jsfiddle.net/wH2qF/1/ ), it stops working:

$(function() {
    $("#Volume").click(function() {

        setTimeout(triggerVolumeChange, 4000);

        function triggerVolumeChange() {

            var volumeDiv = document.getElementById("volumeNumber");
            var volumeOld = 8;
            var volumeNew = 37;
            var timeNew = (1000 / (volumeNew - volumeOld));
            changeVolume();

            function changeVolume() {
                volumeDiv.innerHTML = volumeOld;
                volumeOld++;
                if (volumeOld <= volumeNew) setTimeout(changeVolume, timeNew);
            };

        };

    });
});​

Any idea why?

Is it because I'm calling changeVolume(); inside another function? If so, how can I make that function work without having to call it?

Answer 1

You have MooTools selected, but it looks like you're using jQuery's .ready() and DOM selection syntax.

Choose one of the jQuery options from the menu on the left. Or get rid of the outer $(function() {...}); and update the selection/handler code.

Answer 2

Why do you have Nested functions when not required in this scenario..

Move the function declarations to the outside

$(function() {
    $("#Volume").click(function() {
        setTimeout(triggerVolumeChange, 4000);
    });
});

var volumeDiv = document.getElementById("volumeNumber");
var volumeOld = 8;
var volumeNew = 37;
var timeNew ;

function triggerVolumeChange() {
    timeNew = (1000 / (volumeNew - volumeOld));
    changeVolume();
};

function changeVolume() {
    volumeDiv.innerHTML = volumeOld;
    volumeOld++;
    if (volumeOld <= volumeNew) 
        setTimeout(changeVolume, timeNew);
};​

Also make sure the Framework is set to jQuery ..

Check Fiddle