Using a callback function in jQuery

Question

I've been breaking my head over this for several hours now, I'm pretty new to javascript overall so please bear with me.

What I'm trying to achieve:

• show a 3 seconds div before a video plays (using the Vimeo api)

What I've tried:

• I've tried using .setTimeOut, problem is it only fires once, so the video plays for less than a second and then stops.
• .setTimeInterval also doesn't work in my case since it fires at an interval and not continuously.
• .delay() is only for jquery effects (correct me if I'm wrong)

What I'm trying now; using a callback parameter

• I'm trying to add a callback so it fires my second function (in which the video starts) after it did the first function, with the delay(3000)

My code

// SHOW DIV 3 SECONDS BEFORE VIDEO STARTS
(function($) {

  $(document).on("click", "a.short-button", function videoStart(callback) {

    $('.short_preloader').fadeIn().delay(3000).fadeOut();
    callback();

  });

  // DO THIS FUNCTION AFTER THE DELAY
  videoStart(function() {

    var vidframe = $('.embed-container.short-embed iframe'),
      status = $('.status');

    vidframe(function() {

      var player = $f(this);
      player.api('play');

    });

  });

})(jQuery);

My function shows the .short_preloader div for 3 seconds, and should fire the second part of the code afterwards.

Thank you so much in advance!

Victor

Answer 1

fadeOut works asynchronously. You need to wait for it to complete and then call the callback function:

Instead of

$('.short_preloader').fadeIn().delay(3000).fadeOut();
callback();

do this:

$('.short_preloader').fadeIn().delay(3000).fadeOut(callback);

See the following example, which works like you want:

$('button').click(function() {
  $('.ad').fadeIn().delay(3000).fadeOut(play);
});

function play() {
  $('.video').show();
  console.log('playing video');
}

.ad, .video {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Start video</button>

<div class="ad">An ad</div>
<div class="video">Video player</div>