在另一个函数完成后执行 jQuery 函数 [英] Execute jQuery function after another function completes

问题描述

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

function Typer(){var srcText = '示例';变量 i = 0;var 结果 = srcText[i];设置间隔(函数(){如果(我 == srcText.length){clearInterval(this);返回;};我++;结果 += srcText[i].replace("
", "
");$("#message").html(结果);},100);}

第二个函数播放声音

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

我一个接一个地调用函数

打字机();播放BGM();

但是随着文本的输入，声音开始播放.我只想在打字完成后播放声音.

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

我该如何解决这个问题?

解决方案

你应该使用回调参数:

function Typer(回调){var srcText = '示例';变量 i = 0;var 结果 = srcText[i];var 间隔 = setInterval(function() {如果(我 == srcText.length - 1){清除间隔(间隔)；打回来();返回;}我++;结果 += srcText[i].replace("
", "
");$("#message").html(result);},100);返回真；}功能播放BGM(){alert("播放BGM功能");$('#bgm').get(0).play();}打字机(函数(){播放BGM();});//或单行:Typer(playBGM);

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

此外，this 是一篇关于回调的好文章.

function Typer(callback){var srcText = '示例';变量 i = 0;var 结果 = srcText[i];var 间隔 = setInterval(function() {如果(我 == srcText.length - 1){清除间隔(间隔)；打回来();返回;}我++;结果 += srcText[i].replace("
", "
");$("#message").html(result);},100);返回真；}功能播放BGM(){alert("播放BGM功能");$('#bgm').get(0).play();}打字机(函数(){播放BGM();});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><div id="消息">

<audio id="bgm" src="http://www.freesfx.co.uk/rx2/mp3s/9/10780_1381246351.mp3"></audio>

JSFIDDLE

I want to execute a custom jQuery function after another custom function completes
The first function is used for creating a "typewriting" effect

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("
", "<br />");
        $("#message").html( result);
    },
    100);

}

and the second function plays a sound

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

I am calling the functions one after the another like

Typer();
playBGM();

But the sound starts playing as the text is getting typed. I want to play the sound only AFTER the typewriting has finished.

Here is what I have tried: http://jsfiddle.net/GkUEN/5/

How can I fix this?

解决方案

You should use a callback parameter:

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

So, you pass a function as parameter (callback) that will be called in that if before return.

Also, this is a good article about callbacks.

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("
", "<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

这篇关于在另一个函数完成后执行 jQuery 函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！