JS — the violation of the order of the run functions. How to fix?

Today I was asked a question in the framework of this task, but now another question.

The essence: it is Necessary to first read metatags the video to get the real video size, and then resize depending on the window size.

var videoH = new Array videoW = new Array;

$(document).ready(function(){
 $(window).on("resize", function () {
scaleVideoContainer();
 scaleBannerVideoSize('.video-container video');
 }); 
 $('.video-container video').each(function(){
 $(this).bind("loadedmetadata", function () {
videoH.push(this.videoHeight);
videoW.push(this.videoWidth);
});
});
 scaleVideoContainer(); // resisim container
 scaleBannerVideoSize('.video-container video'); // resisim video
});


scaleBannerVideoSize function(element){
 var row = 0;
$(element).each(function(){
 var videoHeight, videoWidth;
!function(row){
 videoHeight = videoH[row];
 videoWidth = videoW[row];
 console.log(videoHeight); // empty at the initial render, but when resize everything is OK.
 }.call(this, row);
++row;
});
});


The problem is that the first function is executed scaleBannerVideoSize and then $(this).bind("loadedmetadata", function () {}
July 12th 19 at 17:17
1 answer
July 12th 19 at 17:19
Remember that the code executes synchronously. And any variables which will appear in the future after you upload the video, are currently not available. This continued running the code, you must move in ready callback metadata.

var videoH = [],
 videoW = [];

$(document).ready(function(){
 $(window).on("resize", function () {
scaleVideoContainer();
 scaleBannerVideoSize('.video-container video');
 }); 
 $('.video-container video').each(function(){
 $(this).bind("loadedmetadata", function () {
videoH.push(this.videoHeight);
videoW.push(this.videoWidth);

 // put here
 scaleVideoContainer(); // resisim container
 scaleBannerVideoSize('.video-container video'); // resisim video
});
});
 // delete from here
 // scaleVideoContainer(); // resisim container
 // scaleBannerVideoSize('.video-container video'); // resisim video
});
it is not quite the right decision. Because video tags several. and each runs a few times. - Chadrick_Spenc commented on July 12th 19 at 17:22
: well, rules, for each video, your resize. - abdul_Hagenes89 commented on July 12th 19 at 17:25
: in what sense? In the code above when the page is loaded the function is executed not just 1 and 5. And since video 5 pieces, then 25 treatments instead of 5. - Chadrick_Spenc commented on July 12th 19 at 17:28
: you need to alter the handler. Drive only video that loaded. And you get 5 - abdul_Hagenes89 commented on July 12th 19 at 17:31
: If you want to get rid of the resize 1 time for all 5 videos, you will need to wait for download all 5 videos in the beginning, but it's more complicated logic. For example, promis, waiting for all 5 loaders, or special. variable consider made colbecki and srinvasa with the number of elements. As you can see it's not easy.

Also consider the fact that if you to resize the piece, everything will be fine, even if a video is not loaded, and if you wait, you will get problems. - abdul_Hagenes89 commented on July 12th 19 at 17:34
:
Here's a simple code. When you reload the page sometimes all 5 videos in the log writes, and sometimes 1. Sometimes 2. In short, not stable somehow
$(document).ready(function(){

 for(var k = 0; k < videos.length; k++) {
 var video = videos[k];
 video.onloadedmetadata = function() {
 console.log(k + ':' + this.videoWidth);
 videoH[k] = this.videoHeight;
 videoW[k] = this.videoWidth;
};
}
});
- Chadrick_Spenc commented on July 12th 19 at 17:37
: with this code the same garbage
$(document).ready(function(){

 var row = 0;
 $('.video-container video').each(function(){

!function(row){

 $(this).bind("loadedmetadata", function () {
 console.log(row + ':' + this.videoWidth);
 videoH[row] = this.videoHeight;
 videoW[row] = this.videoWidth;

scaleVideoContainer();
scaleBannerVideoSize($(this),row);
});
 }.call(this, row);
++row;
});
 });
- Chadrick_Spenc commented on July 12th 19 at 17:40

Find more questions by tags JavaScript