jQuery обещание: функция обратного вызова, вызванная сразу

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 теперь возвращает отсроченной, которая только решена после того, как видео перестал играть. В свою очередь, будет вызываться drawConfig.

Answer 2

У проигрывателя video.js есть событие, в котором вы должны прослушать, и вы должны разрешить сообщение об объекте объекта Deferer.

В вашем doPlaySequence() делать,

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

Вам может понадобиться передать свой объект Dtd к doPlaySequence, или просто создать его внутри doPlaySequence, так как это единственная цель подождать, пока видео не играет полностью.

Установка таймаута не будет служить вашей цели.