将变量从一个函数传递到另一个函数 - Javascript答案

【问题标题】：Passing variable from one funciton to another - Javascript将变量从一个函数传递到另一个函数 - Javascript
【发布时间】：2020-01-16 12:41:11
【问题描述】：

我是 JS 的菜鸟，我开始习惯基础知识，但我正在努力将一个变量从一个已经在一个函数中的函数中传递给另一个函数。

我查找了范围并声明了一个全局变量，但是当我在控制台登录时它显示未定义。这是我的代码。 该项目是一个条形图，以百分比显示您在工作中的轮班时间。

我需要将百分比变量从定时循环中传递到 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>

【问题讨论】：

尝试将百分比设为 var，避免使用 let 阻止范围界定

标签： javascript loops datetime scope global-variables

【解决方案1】：

JavaScript 同步处理代码。只有一个执行线程。在 JavaScript 调用堆栈空闲之前，您传递给 setTimeout() 的函数不会被调用。因此，在您调用 setTimeout() 之后，您的其余代码将继续处理，一直到底部的 console.log() 语句，但此时您的计时器回调仍未运行，因此您会看到它记录当前值 (undefined)。

所以，真正的问题是您的console.log() 语句在异步计时器运行之前运行。将日志移动到异步函数中表明它正在工作。

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>

【讨论】：

【解决方案2】：

moveLoadingbar 是 Setup 函数中的嵌套函数。不能直接访问，所以报错了。

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>

【讨论】：