另一个函数中的函数不起作用答案

【问题标题】：function inside another function doesn't work另一个函数中的函数不起作用
【发布时间】：2012-12-14 23:10:00
【问题描述】：

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

这是一个在 1 秒内从 8 变为 37 的字符串。它工作正常。

但是，当我尝试将其放入单击事件处理程序 (http://jsfiddle.net/wH2qF/1/) 时，它停止工作：

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

        };

    });
});

知道为什么吗？

是因为我在另一个函数中调用changeVolume(); 吗？如果是这样，我怎样才能使该函数工作而不必调用它？

【问题讨论】：

为什么会有嵌套函数？？
@Sushanth--我的猜测是范围界定或意外。函数一直是嵌套的，尽管有时它并不像这样明显。
我对 JS 很陌生，所以我为代码的结构方式道歉......也许这就是它不起作用的原因......关于如何修复它的任何想法？在用户单击按钮后 4 秒，我基本上需要该字符串从 8-37 变为...（它用于我正在设计的应用程序的模拟环境）
@DaveNewton .. 是的，没错.. 但我看不出有理由将函数嵌套在 OP 的场景中

标签： javascript

【解决方案1】：

您选择了MooTools，但看起来您正在使用 jQuery 的 .ready() 和 DOM 选择语法。

从左侧菜单中选择jQuery 选项之一。或者去掉外部的$(function() {...}); 并更新选择/处理程序代码。

【讨论】：

对此感到抱歉..我在工作中参与了这个项目，鉴于时间紧迫，我正在拼命尝试解决这些问题......所以我的大部分“编码”来自粘贴位和来自我在网上看到的 tuts 和其他文档网站的片段......关于你给出这个小提琴的答案：jsfiddle.net/wH2qF/1 你能否指出我需要在哪里进行必要的更改才能在点击时正确使用此功能？非常感谢！
@ttothec：在 jsFiddle 页面的左侧，有一个菜单，当前选择了 MooTools 1.4.5。单击该菜单，然后选择jQuery 1.8.2。 （当然，点击顶部的Run。）
哦...这确实使它在 jsFiddle 页面中工作...我想知道为什么它不能在我的代码上工作...
@ttothec：你导入了 jQuery 库吗？ <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

【解决方案2】：

为什么在这种情况下不需要嵌套函数..

将函数声明移到外面

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

还要确保框架设置为 jQuery ..

Check Fiddle

【讨论】：