在 jQuery 中使用回调函数

Question

我已经为此烦恼了好几个小时了，我对 javascript 整体还是很陌生，所以请多多包涵。

我想要达到的目标：

• 在视频播放前显示 3 秒 div（使用 Vimeo api）

我的尝试：

• 我尝试过使用 .setTimeOut，但问题是它只触发一次，所以视频播放不到一秒然后就停止了。
• .setTimeInterval 在我的情况下也不起作用，因为它会间隔触发而不是连续触发。
• .delay() 仅适用于 jquery 效果（如果我错了，请纠正我）

我现在正在尝试什么；使用回调参数

• 我正在尝试添加一个回调，以便它在执行第一个函数后触发我的第二个函数（视频在其中开始），延迟 (3000)

我的代码

// 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);

我的函数显示 .short_preloader div 3 秒，然后应该触发代码的第二部分。

非常感谢您！

维克多

Answer 1

fadeOut 异步工作。你需要等待它完成，然后调用callback函数：

代替

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

这样做：

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

请参阅以下示例，其工作方式如您所愿：

$('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>