JS - zwrócenie wartości zmiennej z funkcji

pytanie zadane 22 kwietnia 2017 w JavaScript przez kralcz88 Obywatel (1,810 p.)

Mam problem ze zwróceniem wartości zmiennej howLoaded po wykonaniu funkcji. Poniżej kod + komentarz wyjaśniający:

    var imgNames = [
        'img/forrest2.jpg',
        'img/tina2.jpg',
        'img/forrest22.jpg',
        'img/tina22.jpg',
        'img/forrest222.jpg'
        ];


   var howLoaded = 0;

   function setLoadingBar() {

        howLoaded++;
        loadingBar.style.width = howLoaded * loadingStep + "%"; 

        if (howLoaded >= imgNames.length) {
            setTimeout(function() {
                location.href = "http://www.google.pl";
            }, 2000)
        }
      console.log(howLoaded); // zwróci wartość 5
      return howLoaded;
    };

console.log(howLoaded); // zwróci wartość 0 pomimo instrukcji return powyżej

 for (var x=0; x<imgNames.length; x++) { 
            images[x] = new Image();
            images[x].onload = setLoadingBar;   
            images[x].src = imgNames[x];
        }

Potrzebuję do dalszej pracy otrzymać zmienną howLoaded o wartości równej ilości orazków z tablicy imgNames.

Proszę o pomoc.

1 odpowiedź

odpowiedź 22 kwietnia 2017 przez Comandeer Guru (600,810 p.)

Asynchroniczność! W chwili, gdy pobierasz wartość tej zmiennej, żaden obrazek nawet nie zaczął się wczytywać, więc zwraca 0. Musiałbyś wczytywać obrazki i obsługiwać kod w callbacku, coś jak przy wczytywaniu skryptów (z tym, że obrazki można puścić naraz wszystkie, nie trzeba jak tam po kolei).

komentarz 22 kwietnia 2017 przez kralcz88 Obywatel (1,810 p.)

(function() {
    
    var imgNames = [
        'img/forrest2.jpg',
        'img/tina2.jpg',
        'img/forrest22.jpg',
        'img/tina22.jpg',
        'img/forrest222.jpg'
        ];
    var howLoaded = 0; 
    var loadingStep = (100 / imgNames.length); 
    var images = []; 
    var loadingBarBg = null; 
    var loadingBar = null; 
    var wczytano = null;


    function setLoadingBar() {

        howLoaded++;
        loadingBar.style.width = howLoaded * loadingStep + "%"; 

        if (howLoaded >= imgNames.length) {
            setTimeout(function() {
                location.href = "http://www.google.pl";
            }, 2000)
        }
       return howLoaded;
    }

    
    function startLoading() {
        var div = document.querySelector('#progressCnt');

        wczytano = document.createElement('div');
        wczytano.className = "pasek";

        wczytano.innerHTML =  howLoaded + ' / ' + imgNames.length;

        div.appendChild(wczytano);

        loadingBarBg = document.createElement('div');
        loadingBarBg.className = 'loading-bg';   

        loadingBar = document.createElement('div');
        loadingBar.className = 'progress';

        loadingBarBg.appendChild(loadingBar);

        div.appendChild(loadingBarBg);

        for (var x=0; x<imgNames.length; x++) { 
            images[x] = new Image();
            images[x].onload = setLoadingBar;   
            images[x].src = imgNames[x];
        }
    }

    document.addEventListener("DOMContentLoaded", function(event) {
        startLoading();
    });

    
})();

Przesyłam cały kod. W tym momencie obrazki chyba są już wczytane i zmienna howLoaded powinna mieć wartość inną niż 0, ale nadal ten fagment kodu

<wczytano.innerHTML = howLoaded + ' / ' + imgNames.length;>

daje pobiera wartość 0 (zero). Gdyby wartość howLoaded z funkcji setLoadingBar byłaby zerowa, to pasek postępu nie pojawił by się w ogóle.

<!DOCTYPE html>
<html lang="pl">

<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title>RWD</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" type="text/css"/>
	<link rel="stylesheet" href="style.css" type="text/css"/>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800&amp;subset=latin-ext" rel="stylesheet">
	
</head>

<body>

	<div id="progressCnt"></div>


	<script type="text/javascript" src="js/scripts.js"></script>

</body>

</html>

body{
	background-color: #000;
	color: #fff;
}

.loading-bg{
	margin: 30px 0;
	width: 600px;
	height: 40px;
	background: #eee;
	border: 1px solid #ddd;
	overflow: hidden;
}

.loading-bg .progress{
	width: 0;
	height: 100%;
	background: #EC185D;
	overflow: hidden;
}

.pasek{
	margin: 10px 0;
	display: inline-block;
	color: #EC185D;
}