函数中的 setInterval 每秒加倍 console.log - Javascript

Question

我仍然对 JS 有所了解并且我开始了解它，但我在 setInterval 上苦苦挣扎。我在网上寻找答案，但无法实施解决方案。 我的项目是一个加载条，显示您的轮班工作时间。

我有一个 setInterval 用于计算从现在到每秒 09:00:00am 的距离

我有另一个 setInterval 用于更新每秒一个函数内的加载条的宽度

我有根据的猜测是两者有冲突，但我需要在这两个函数之间传递变量，所以我不能将它们分开。我添加了一个 console.log，它将从 1、20、50、150、300、500、700 等开始增加。这弄乱了我的加载栏，因为过了一会儿它试图 loadingBar.style.width = percentage.toFixed(4) + "%"; x 1000 每秒。

我错过了什么？

const target = 100; //percent

let shiftLength = 8.5; //hours
//convert into miliseconds
shiftLength *= 60 * (60 * 1000);

function setup() {
//Set the start point for today at 09:00:00am & now.
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 the day complete
    let percentage;
    percentage = (miliseconds / shiftLength) * 100;

    moveLoadingBar();

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

        //pass the percentage to a function that updates the width of the loading bar
        function frame() {
            if (percentage >= target) {
                clearInterval(id);
            } else {
                loadingBar.style.width = percentage.toFixed(4) + "%";

                //The line above and this is being duplicated to the console.
                //the longer this code runs the more buggy my bar appears.
                console.log("hello");
            }
        }
    }
}
}

setup();

#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>Loading bar project</title>
</head>

<body>

<h1>JavaScript Progress Bar</h1>

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

<br>

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

Answer 1

您正在设置间隔内的间隔，请尝试改用 setTimeout：

setInterval(timeConversion, 1000); // INTERVAL

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 the day complete
    let percentage;
    percentage = (miliseconds / shiftLength) * 100;

    moveLoadingBar();

    function moveLoadingBar() {
        let loadingBar = document.getElementById("myBar");
        let id = setInterval(frame, 1000); // INTERVAL INSIDE INTERVAL; make this setTimeout

        //pass the percentage to a function that updates the width of the loading bar
        function frame() {
            if (percentage >= target) {
                clearInterval(id);
            } else {
                loadingBar.style.width = percentage.toFixed(4) + "%";

                //The line above and this is being duplicated to the console.
                //the longer this code runs the more buggy my bar appears.
                console.log("hello");
            }
        }
    }

函数中的 setInterval 每秒加倍 console.log - Javascript

setInterval within a function is doubling console.log each second - Javascript

javascript

datetime

loops

duplicates

setinterval