javascript - 等待递归 jQuery 函数完全完成

Question

另一个应该很简单，但却给我带来了麻烦。我正在尝试了解 jQuery 的 .Deferred() 和 .promise() 功能来延迟某些操作，直到递归函数完全完成。目前，我的代码类似于以下内容:

    function showText(setTarget, setMessage, setIndex, setInterval) {
        var defer = jQuery.Deferred();
        var doShowText = function (target, message, index, interval) {
            if (index < message.length) {
                $(target).append(message[index++]);
                setTimeout(function () { doShowText(target, message, index, interval); }, interval);
            }
            else {
                alert("Done!");
                defer.resolve();
            }
        };

        doShowText(setTarget, setMessage, setIndex, setInterval);
        return defer.promise();
    }

function startButtonClick() {
    displayElement($("#getElement"));
    showText($("#getElement > h1"), "This text will slowly write to the screen.", 0, 50).promise()
        .then(alert("Finished."));

}

当它运行时，“完成”警报(我试图推迟)在第一次执行递归脚本后运行，因此它会在仅打印一个字母时出现(不是预期的结果)。但是，一旦打印完所有字母并且递归完成，“完成”警报就会正确显示，因此似乎我的延迟变量在那之前不应该被解析。谁能帮我发现为什么在这里提早调用“已完成”警报？感谢任何帮助!

编辑:我意识到我不小心发布了我的代码的一个稍旧的版本。它已更新为正确的版本(运行时的行为是相同的)。

Answer 1

发生这种情况是因为您实际上是在立即执行 alert 函数，而不是传递函数引用。

改为这样做:

.then(alert.bind(null, 'finished'));

或者

.then(function () {
    alert('finished');
});