title: Using a callback function in jQuery
body: <p>I've been breaking my head over this for several hours now, I'm pretty new to javascript overall so please bear with me.</p>
  
  <p><strong>What I'm trying to achieve:</strong> </p>
  
  <ul>
  <li>show a 3 seconds div before a video plays (using the Vimeo api)</li>
  </ul>
  
  <p><strong>What I've tried:</strong> </p>
  
  <ul>
  <li>I've tried using .setTimeOut, problem is it only fires once, so the video plays for less than a second and then stops.</li>
  <li>.setTimeInterval also doesn't work in my case since it fires at an interval and not continuously.</li>
  <li>.delay() is only for jquery effects (correct me if I'm wrong)</li>
  </ul>
  
  <p><strong>What I'm trying now; using a callback parameter</strong></p>
  
  <ul>
  <li>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)</li>
  </ul>
  
  <p><strong>My code</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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);</code></pre>
  </div>
  </div>
  </p>
  
  <p>My function shows the .short_preloader div for 3 seconds, and should fire the second part of the code afterwards.</p>
  
  <p>Thank you so much in advance!</p>
  
  <p>Victor</p>