我仍然对 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>最佳答案
您要在间隔内设置间隔，请尝试改用 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");
}
}
}
关于javascript - 函数内的 setInterval 每秒将 console.log 加倍 - Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59773923/