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

我对JS有点不了解，我开始习惯了基础知识，但我正在努力从函数中传递一个已经存在于函数中的变量。。转到另一个函数

我已经查找了作用域，并且声明了一个全局变量，但当我记录控制台日志时，它显示undefined。这是我的密码。该项目是一个条形图，以百分比显示您轮班的时间

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

HTML

---

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

因此，真正的问题是您的console.log语句在异步计时器运行之前运行。将日志移动到异步函数中可以显示它正在工作

常数目标=100//百分比 让百分比； 功能设置{ //将今天的起点设置为上午9:00:00 开始=新日期； start.setHours9,00,00； setIntervaltimeConversion，1000； 函数时间转换{ //计算从现在到起点之间的差值（以毫秒为单位）。 让我们现在=新的日期； 让距离=现在-=开始； //小时、分钟和秒的时间计算 让小时数=Math.floordistance%1000*60*60*24/1000*60*60； 分钟数=Math.floordistance%1000*60*60/1000*60； 设秒数=Math.floordistance%1000*60/1000； 让毫秒=距离； //完成天数的百分比****努力将变量传递给全局变量**** 百分比=毫秒/目标*100； console.log'p'，百分比；//=target{ 清晰有效； }否则{ loadingBar.style.width=百分比+%； } } } //调试 设置； 移动加载杆； console.logtarget； 我的进展{ 宽度：100%； 背景色：ddd； } 我的酒吧{ 宽度：1%； 高度：30px； 背景：线性梯度90度，00C9FF 0%，92FE9D 100%； } 你好，世界 进度条

---

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

因此，真正的问题是您的console.log语句在异步计时器运行之前运行。将日志移动到异步函数中可以显示它正在工作

常数目标=100//百分比 让百分比； 功能设置{ //将今天的起点设置为上午9:00:00 开始=新日期； start.setHours9,00,00； setIntervaltimeConversion，1000； 函数时间转换{ //计算从现在到起点之间的差值（以毫秒为单位）。 让我们现在=新的日期； 让距离=现在-=开始； //小时、分钟和秒的时间计算 让小时数=Math.floordistance%1000*60*60*24/1000*60*60； 分钟数=Math.floordistance%1000*60*60/1000*60； 设秒数=Math.floordistance%1000*60/1000； 让毫秒=距离； //完成天数的百分比****努力将变量传递给全局变量**** 百分比=毫秒/目标*100； console.log'p'，百分比；//=target{ 清晰有效； }否则{ loadingBar.style.width=百分比+%； } } } //调试 设置； 移动加载杆； console.logtarget； 我的进展{ 宽度：100%； 背景色：ddd； } 我的酒吧{ 宽度：1%； 高度：30px； 背景：线性梯度90度，00C9FF 0%，92FE9D 100%； } 你好，世界 进度条

---

moveLoadingbar是设置函数中的嵌套函数。您无法直接访问它，因此它抛出了一个错误

常数目标=100//百分比 风险值百分比； 功能设置{ 调试器； //将今天的起点设置为上午9:00:00 开始=新日期； start.setHours9,00,00； setIntervaltimeConversion，1000； 函数时间转换{ //计算从现在到起点之间的差值（以毫秒为单位）。 让我们现在=新的日期； 让距离=现在-=开始； //小时、分钟和秒的时间计算 让小时数=Math.floordistance%1000*60*60*24/1000*60*60； 分钟数=Math.floordistance%1000*60*60/1000*60； 让秒=垫 h、 楼层间距%1000*60/1000； 让毫秒=距离； //完成天数的百分比****努力将变量传递给全局变量**** 百分比=毫秒/目标*100； } } 函数移动加载条{ 让loadingBar=document.getElementByIdmyBar； 设id=setIntervalframe，1000； 功能框架{ 如果百分比>=目标{ 清晰有效； }否则{ loadingBar.style.width=百分比+%； } } } 设置； //移动加载条；//这是一个问题 控制台。对数百分比； console.logtarget； 我的进展{ 宽度：100%； 背景色：ddd； } 我的酒吧{ 宽度：1%； 高度：30px； 背景：线性梯度90度，00C9FF 0%，92FE9D 100%； } 进度条

---

moveLoadingbar是设置函数中的嵌套函数。您无法直接访问它，因此它抛出了一个错误

常数目标=100//百分比 风险值百分比； 功能设置{ 调试器； //将今天的起点设置为上午9:00:00 开始=新日期； start.setHours9,00,00； setIntervaltimeConversion，1000； 函数时间转换{ //计算从现在到起点之间的差值（以毫秒为单位）。 让我们现在=新的日期； 让距离=现在-=开始； //小时、分钟和秒的时间计算 让小时数=Math.floordistance%1000*60*60*24/1000*60*60； 分钟数=Math.floordistance%1000*60*60/1000*60； 设秒数=Math.floordistance%1000*60/1000； 让毫秒=距离； //完成天数的百分比****努力将变量传递给全局变量**** 百分比=毫秒/目标*100； } } 函数移动加载条{ 让loadingBar=document.getElementByIdmyBar； 设id=setIntervalframe，1000； 功能框架{ 如果百分比>=目标{ 清晰有效； }否则{ loadingBar.style.width=百分比+%； } } } 设置； //移动加载条；//这是一个问题 控制台。对数百分比； console.logtarget； 我的进展{ 宽度：100%； 背景色：ddd； } 我的酒吧{ 宽度：1%； 高度：30px； 背景：线性梯度90度，00C9FF 0%，92FE9D 100%； } 进度条

---

尝试将百分比设置为var，使用let避免块作用域尝试将百分比设置为var，使用let避免块作用域

#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>