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

You could look into Promise

Nicolas
– Nicolas

2018-08-17 11:49:21 +00:00
Commented Aug 17, 2018 at 11:49 — Nicolas
– Nicolas, Commented Aug 17, 2018 at 11:49

31piy · Accepted Answer · 2018-08-17 11:57:03Z

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>

edited Aug 17, 2018 at 11:57

answered Aug 17, 2018 at 11:51

31piy

23.9k6 gold badges51 silver badges69 bronze badges

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

5 Comments

31piy Over a year ago

@Victor -- You're trying to call a function without defining it. It is a syntax error; observe the console logs to verify it. See the demo snippet I've attached in my answer, and try to change your code similar to it.

Victor Over a year ago

Thank you for bearing with me, I've fixed the syntax error, it fires the second function but only for less then a second. Do you know how I can fix this perhaps?

31piy Over a year ago

@Victor -- I'm not sure what does that mean, but I can see that a green box appears for ~3s before the video plays.

Victor Over a year ago

The delay works and your fix also fires the callback, but the video plays for less than a second and then stops again.

Victor Over a year ago

The problem is google chrome! It works in Safari and Firefox but for some reason Chrome stops playing the video in less than a second..

Collectives™ on Stack Overflow

Using a callback function in jQuery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related