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

Posted 2023-02-19

【中文标题】在另一个函数完成后执行 jQuery 函数

【英文标题】：Execute jQuery function after another function completes

【发布时间】：2013-11-09 13:29:06

【问题描述】：

我想在另一个自定义函数完成后执行一个自定义 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/

我该如何解决这个问题？

【问题讨论】：

如果在function Typer() 的末尾，在100); 之后插入playBGM(); 怎么办？这里的例子jsfiddle.net/GkUEN/99

【参考方案1】：

你应该使用回调参数：

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 是一篇关于回调的好文章。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="message">
</div>
<audio id="bgm" src="http://www.freesfx.co.uk/rx2/mp3s/9/10780_1381246351.mp3">
</audio>

JSFIDDLE

【讨论】：

或者干脆Typer(playBGM);

@PaulDraper 是的，没错，因为playBGM 是一个函数。

正是我想要的。谢谢！

@Riturajratan 存在替换问题，而不是回调问题。我假设代码是正确的。

【参考方案2】：

Deferred Promise 是一种将函数执行整齐而轻松地链接在一起的好方法。无论是 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();
            

我已经修改了 play 函数，所以当音频播放完毕时它会返回一个 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);  

在今天之前，我没有运气以这种方式使用延迟承诺，终于掌握了它。精确定时、链式接口事件在我们想要的时候发生，包括异步事件，从来都不是一件容易的事。至少对我来说，我现在可以控制它，这主要归功于其他人在这里提出问题。

【讨论】：

"THIS" 关键字在 clearInterval(this) 中无效

sqlchild，好吧，我不知道我只是从 OP 的功能中提取了那部分。不过它仍然有效，我在发布之前运行了它，它没有抛出任何错误。但如果你说它无效，我不会争论！

【参考方案3】：

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

function Typer() 
    // Some stuff

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



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

【讨论】：

好主意，但您应该编写与问题更相关的代码

【参考方案4】：

你可以使用下面的代码

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

【讨论】：

如何组合多个功能？例如当 1 完成开始 2 当 2 完成开始 3

这个答案不完整，它不会单独工作。延迟对象需要在 Typer 函数和链中的任何其他函数中定义，以及解析和返回承诺。只有在打字功能完成后才会播放声音。 @SchweizerSchoggi 组合多个功能：Typer().then(playBGM).then(ThirdFunction).then(yetAnotherFunction); 确保您使用的是 JQuery 3.2.1，因为这不适用于 Jquery 1.71，因为我在 JSFiddle 发现上浪费了 15 分钟。

为什么这段代码对我不起作用？我是否缺少任何图书馆或其他东西？！ ://

如何将参数从第一个函数传递到第二个函数