Question

所以我有这段代码：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);
};

这是一个从1秒到7秒的字符串。它工作正常。

但是，当我尝试将其放入点击事件处理程序（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();吗？如果是这样，我怎样才能使该功能无需调用呢？

Answer 1

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

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

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

还要确保将Framework设置为jQuery ..

<强> Check Fiddle

另一个函数里面的函数不起作用

2 个答案: