Передача переменной из одной функции в другую - Javascript - PullRequest
Новая
       20

Передача переменной из одной функции в другую - Javascript

1 голос
/ 16 января 2020

Я вроде как нуб к JS, и я начинаю привыкать к основам, но я изо всех сил пытаюсь передать переменную из функции, которая уже находится в функции ... в другую функцию.

Я посмотрел область и объявил глобальную переменную, но когда я консольный журнал, он отображает неопределенный. Вот мой код Проект представляет собой столбец, показывающий, как долго вы находитесь в смене на работе, в процентах.

Мне нужно, чтобы переменная процента передавалась из синхронизированного l oop в moveLoadingBar Функция так, чтобы бар медленно двигался вверх, поскольку день продолжается. Что мне не хватает? 

const target = 100; //percent
let percentage;

function setup() {

//Set the start point for today at 09:00:00am
let start = new Date();
start.setHours(9, 00, 00);

setInterval(timeConversion, 1000);
function timeConversion() {

    //Work out the difference in miliseconds from now to the start point.
    let now = new Date();
    let distance = now -= start;

    // Time calculations for hours, minutes and seconds
    let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((distance % (1000 * 60)) / 1000);
    let miliseconds = distance;

    //Percentage of day complete **** struggling to pass variable to global variable ****
    percentage = (miliseconds / target) * 100
}
}

function moveLoadingBar() {
let loadingBar = document.getElementById("myBar");
let id = setInterval(frame, 1000);

function frame() {
    if (percentage >= target) {
        clearInterval(id);
    } else {
        loadingBar.style.width = percentage + "%";
    }
}
}

//debugging
setup();
moveLoadingbar();
console.log(percentage);
console.log(target);

CSS

#myProgress {
width: 100%;
background-color: #ddd;
}

#myBar {
    width: 1%;
    height: 30px;
    background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%);
}

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <title>Hello world</title>
</head>

<body>

    <h1>Progress Bar</h1>

    <div id="myProgress">
        <div id="myBar"></div>
    </div>

    <br>

</body>
<script src="index.js"></script>

</html>

Ответы [ 2 ]

3 голосов
/ 16 января 2020

JavaScript обрабатывает код синхронно. Существует только один поток исполнения. Функция, которую вы передаете setTimeout(), не будет вызываться, пока стек вызовов JavaScript не будет занят. Итак, после того, как вы вызываете setTimeout(), остальная часть вашего кода продолжает обрабатываться, вплоть до ваших console.log() операторов внизу, но в этот момент ваш обратный вызов таймера все еще не запущен, поэтому вы видите его записано текущее значение (undefined).

Итак, действительно, проблема в том, что ваши операторы console.log() выполняются до выполнения асинхронного таймера. Перемещение журнала в функцию asyn c показывает, что он работает. 

const target = 100; //percent
let percentage;

function setup() {

  //Set the start point for today at 09:00:00am
  let start = new Date();
  start.setHours(9, 00, 00);

  setInterval(timeConversion, 1000);
  
  function timeConversion() {

    //Work out the difference in miliseconds from now to the start point.
    let now = new Date();
    let distance = now -= start;

    // Time calculations for hours, minutes and seconds
    let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((distance % (1000 * 60)) / 1000);
    let miliseconds = distance;

    //Percentage of day complete **** struggling to pass variable to global variable ****
    percentage = (miliseconds / target) * 100;
    console.log('p',percentage); // <-- You have to wait until the function has run
  }
}

function moveLoadingBar() {
  let loadingBar = document.getElementById("myBar");
  let id = setInterval(frame, 1000);

  function frame() {
    if (percentage >= target) {
        clearInterval(id);
    } else {
        loadingBar.style.width = percentage + "%";
    }
  }
}

//debugging
setup();
moveLoadingBar();
console.log(target);
#myProgress {
width: 100%;
background-color: #ddd;
}

#myBar {
    width: 1%;
    height: 30px;
    background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%);
}
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <title>Hello world</title>
</head>

<body>

    <h1>Progress Bar</h1>

    <div id="myProgress">
        <div id="myBar"></div>
    </div>

    <br>

</body>
<script src="index.js"></script>

</html>
0 голосов
/ 16 января 2020

moveLoadingbar - это вложенная функция внутри функции настройки. К которому вы не можете получить доступ напрямую, и поэтому выдает ошибку. 

const target = 100; //percent
var percentage;

function setup() {
debugger;
//Set the start point for today at 09:00:00am
let start = new Date();
start.setHours(9, 00, 00);
setInterval(timeConversion, 1000);

function timeConversion() {

    //Work out the difference in miliseconds from now to the start point.
    let now = new Date();
    let distance = now -= start;

    // Time calculations for hours, minutes and seconds
    let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((distance % (1000 * 60)) / 1000);
    let miliseconds = distance;

    //Percentage of day complete **** struggling to pass variable to global variable ****
    percentage = (miliseconds / target) * 100;
}
}

function moveLoadingBar() {
let loadingBar = document.getElementById("myBar");
let id = setInterval(frame, 1000);

function frame() {
    if (percentage >= target) {
        clearInterval(id);
    } else {
        loadingBar.style.width = percentage + "%";
    }
 }
}


setup();
//moveLoadingbar(); // here is problem
console.log(percentage);
console.log(target);
#myProgress {
width: 100%;
background-color: #ddd;
}

#myBar {
    width: 1%;
    height: 30px;
    background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>





    <h1>Progress Bar</h1>

    <div id="myProgress">
        <div id="myBar"></div>
    </div>

    <br>
...