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中调用。

此外，this是关于回调的好文章。

JSFIDDLE

Answer 3

您还可以使用自定义事件：

function Typer() {
    // Some stuff

    $(anyDomElement).trigger("myCustomEvent");
}


$(anyDomElement).on("myCustomEvent", function() {
    // Some other stuff
});

Answer 4

延迟承诺是将函数执行整齐，简单地链接在一起的好方法。无论是AJAX还是普通函数，它们都提供了比回调更大的灵活性，而且我发现它更容易掌握。

function Typer()
{
var dfd = $.Deferred();
    var srcText = 'EXAMPLE ';
    var i = 0;
    var result = srcText[i];

更新：

////////////////////////////////

  var timer=    setInterval(function() {
                    if(i == srcText.length) {

    // clearInterval(this);


       clearInterval(timer);

////////////////////////////////


   dfd.resolve();
                        };
                        i++;
                        result += srcText[i].replace("\n", "<br />");
                        $("#message").html( result);
                },
                100);
              return dfd.promise();
            }

我已经修改了播放功能，因此它会在音频播放完毕后返回一个声明，这可能对某些人有用。第三个功能在声音播放完毕后触发。

   function playBGM()
    {
      var playsound = $.Deferred();
      $('#bgm')[0].play();
      $("#bgm").on("ended", function() {
         playsound.resolve();
      });
        return playsound.promise();
    }


    function thirdFunction() {
        alert('third function');
    }

现在使用以下内容调用整个事情:(确保使用Jquery 1.9.1或更高版本，因为我发现1.7.2一次执行所有函数，而不是等待每个函数解析。）

Typer().then(playBGM).then(thirdFunction);

在今天之前，我没有以这种方式使用延期承诺，最终抓住了它。准确定时，链式接口事件正好发生在我们想要的时候，包括异步事件，从未如此简单。至少对我来说，我现在已经掌握了它，主要是因为其他人在这里提问。

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

4 个答案: