jQuery promise:callback 函数立即调用

Question

我使用函数 doPlaySequence 播放多个视频，然后使用函数 drawConfig 显示一张图片。我这样写代码：

function wait(dtd) {
  var dtd = $.Deferred();
  
  setTimeout(function() {
    doPlaySequence();
    dtd.resolve();
  }, 0);
  
  return dtd.promise();
}

wait().then(drawConfig);

但是 drawConfig 在视频未结束时立即调用。我只是简单地复制了这个例子，所以代码可能看起来很难看。我用video.js来帮忙播放视频

var stropsrc = new Array(3);
stropsrc[0]= "../rs/MOVIE/KlogoPk.mp4";
stropsrc[1]="../rs/MOVIE/theme.mp4";
stropsrc[2]= "../rs/MOVIE/OpPk.mp4";

function doPlaySequence()
{
  var divcontainer = document.createElement("div");
  divcontainer.setAttribute("id","divop");
  document.body.appendChild(divcontainer);

  var playID = "op0";

  var opplay = document.createElement('video');
  opplay.setAttribute("id",playID);
  opplay.preload = "none";


  divcontainer.appendChild(opplay);

  opplay.src = stropsrc[0];


  var AttrObj = {"datacount":0};
  var myPlayer;
  videojs.setAttributes(opplay,AttrObj);


  myPlayer = videojs(opplay);
  myPlayer.play();


  opplay.addEventListener("ended",function(e)
  {
    e.preventDefault();

    var c = parseInt(this.getAttribute("datacount"))+1;
    if(c < 3)
    {
      opplay.src = stropsrc[c];
      AttrObj.datacount = c;
      videojs.setAttributes(opplay,AttrObj);

      myPlayer = videojs(opplay);
      myPlayer.play();

    }
    else//end
    {

      /*reset*/
      opplay.src = stropsrc[0];
      AttrObj.datacount = 0;
      videojs.setAttributes(opplay,AttrObj);


      /*hide*/
      var divContainer = document.getElementById("divop");

      divContainer.style.display = "none";
      divContainer.style.visibility = "hidden";

      var divOP = document.getElementById("op0");
      divOP.style.display = "none";
      divOP.style.visibility = "hidden";
    }
  });

Answer 1

只有运行 drawConfig 函数 在视频完成 之后，您需要从视频的 ended 事件中调用它处理程序，或创建一个在该事件中解决的承诺。试试这个：

function doPlaySequence()
{
  var deferred = $.Deferred();

  // your code...

  var opplay = document.createElement('video');
  // opplay logic here...

  opplay.addEventListener("ended", function(e) {
    // video ended logic here...

    deferred.resolve();
  }

  return deferred;
}

doPlaySequence().then(drawConfig);

您会看到 doPlaySequence 函数现在 returns 延迟，只有在视频停止播放后才会解决。反过来，drawConfig 将被调用。

Answer 2

video.js 播放器有一个您应该收听的已结束事件，您应该解析您的 Deferer 对象 post 那。

在你的 doPlaySequence() 中做，

 myPlayer.on('ended', function() {
    dtd.resolve();
 });

您可能需要将您的 dtd 对象传递给 doPlaySequence，或者只是在 doPlaySequence 中创建它，因为它只是 objective 是等待视频完全播放。

设置超时不会达到您的目的。

jQuery promise:callback 函数立即调用

jQuery promise:callback function called at once

jquery

promise

video.js