Execute jQuery function after another function completes

Question

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("\n", "<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?

What if at the end of function Typer(), after 100); insert playBGM(); ? Here example jsfiddle.net/GkUEN/99 — Andris
– Andris, Commented Jul 7, 2015 at 15:01

Pradeep · Accepted Answer · 2013-10-30 05:22:47Z

82

You can use below code

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

answered Oct 30, 2013 at 5:22

Pradeep

4,88211 gold badges41 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

JonSnow Over a year ago

How can I combine multiple functions? e.g. when 1 done start 2 when 2 done start 3

hiJump Over a year ago

This answer is not complete, it won't work on its own. A deferred object needs defining in the Typer function, and any other function in the chain, along with resolving, and returning the promise. Only then will the sound play after the typer function completes. @SchweizerSchoggi to combine multiple functions: Typer().then(playBGM).then(ThirdFunction).then(yetAnotherFunction); Make sure you're using JQuery 3.2.1 as this will NOT work with Jquery 1.71 as I just wasted 15 minutes on JSFiddle discovering.

Mojtaba Rezaeian Over a year ago

Why this code is not working for me? Am I missing any library or something?! :/

Imran Mohammed Over a year ago

how to pass arguments from first function to second function

Hitesh Tripathi · Accepted Answer · 2019-12-16 10:31:07Z

37

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

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

edited Dec 16, 2019 at 10:31

Hitesh Tripathi

8542 gold badges12 silver badges25 bronze badges

answered Oct 30, 2013 at 5:20

Ionică Bizău

114k95 gold badges311 silver badges490 bronze badges

3 Comments

Paul Draper Over a year ago

Or simply Typer(playBGM);

Ionică Bizău Over a year ago

@PaulDraper Yes, exactly, because playBGM is a function.

Ionică Bizău Over a year ago

@Riturajratan There is a replace problem, not a callback problem. I replied assuming that the code is correct.

Jerome · Accepted Answer · 2014-10-31 09:07:16Z

4

You could also use custom events:

function Typer() {
    // Some stuff

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


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

edited Oct 31, 2014 at 9:07

answered Oct 30, 2014 at 16:29

Jerome

492 bronze badges

1 Comment

SBH Over a year ago

nice idea, but you should write your code more related to the question

sqlchild · Accepted Answer · 2018-04-04 05:03:45Z

3

Deferred promises are a nice way to chain together function execution neatly and easily. Whether AJAX or normal functions, they offer greater flexibility than callbacks, and I've found easier to grasp.

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

UPDATE :

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

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

I've modified the play function so it returns a promise when the audio finishes playing, which might be useful to some. The third function fires when sound finishes playing.

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


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

Now call the whole thing with the following: (be sure to use Jquery 1.9.1 or above as I found that 1.7.2 executes all the functions at once, rather than waiting for each to resolve.)

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

Before today, I had no luck using deferred promises in this way, and finally have grasped it. Precisely timed, chained interface events occurring exactly when we want them to, including async events, has never been easy. For me at least, I now have it under control thanks largely to others asking questions here.

edited Apr 4, 2018 at 5:03

sqlchild

9,13630 gold badges110 silver badges169 bronze badges

answered Aug 15, 2017 at 9:13

hiJump

1,4081 gold badge10 silver badges8 bronze badges

2 Comments

sqlchild Over a year ago

"THIS" keyword is invalid here in clearInterval(this)

hiJump Over a year ago

sqlchild, okay I didn't know I just took that part from the OP's function. It still works though, I ran it before posting and it didn't throw any errors. But if you say it's invalid I won't argue!

Collectives™ on Stack Overflow

Execute jQuery function after another function completes

4 Answers 4

4 Comments

3 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related