在另一个函数完成后执行jQuery函数

Question

我希望在另一个自定义函数完成后执行自定义jQuery函数
第一个函数用于创建"打字"效果

function Typer()
{
    var srcText = 'EXAMPLE ';
    var i = 0;
    var result = srcText[i];
    setInterval(function() {
        if(i == srcText.length) {
            clearInterval(this);
            return;
        };
        i++;
        result += srcText[i].replace("\n", "<br />");
        $("#message").html( result);
    },
    100);

}

第二个功能播放声音

function playBGM()
{
    document.getElementById('bgm').play();
}

我一个接一个地调用函数

Typer();
playBGM();

但是当文本被打字时声音开始播放.我只想在打字完成后播放声音.

这是我尝试过的:http://jsfiddle.net/GkUEN/5/

我怎样才能解决这个问题？

Answer 1

您可以使用以下代码

$.when( Typer() ).done(function() {
       playBGM();
});

Answer 2

您应该使用回调参数:

function Typer(callback)
{
    var srcText = 'EXAMPLE ';
    var i = 0;
    var result = srcText[i];
    var interval = setInterval(function() {
        if(i == srcText.length - 1) {
            clearInterval(interval);
            callback();
            return;
        }
        i++;
        result += srcText[i].replace("\n", "<br />");
        $("#message").html(result);
    },
    100);
    return true;


}

function playBGM () {
    alert("Play BGM function");
    $('#bgm').get(0).play();
}

Typer(function () {
    playBGM();
});

// or one-liner: Typer(playBGM);

因此,您传递一个函数作为参数(callback),该函数将在if之前调用return.

另外,这是一篇关于回调的好文章.

的jsfiddle