javascript - 函数内的 setInterval 每秒将 console.log 加倍

javascript - 函数内的 setInterval 每秒将 console.log 加倍 - Javascript

转载作者：行者123 更新时间：2023-12-01 00:15:52

24

4

我仍然对 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/

24

4

0

文章推荐： python - Compute Engine n1-标准仅使用 50% 的 CPU

文章推荐： JavaScript - 设置超时脚本

文章推荐： perl - 无法在perl中重载构造函数

文章推荐： javascript - 在 TypeScript 中使用 interfect 定义对象数组？

android - Kotlin转换为Double？加倍
我正在使用Mapbox开发 map 应用程序。我正在使用的方法使用Point(Double，Double) 获取类型不匹配要求:两次发现:两次？ val lat = location
java - 加倍 System.out
我想将 System.out 消息写入另一个 OutputStream，但我仍然想要标准输出。我找到了类似问题的答案Copy and Redirecting System.err Stream :
c++ - MPI_Allreduce 加倍
我正在尝试为我正在处理的排序找到所有处理器的全局最小值和最大值。我正在尝试使用 MPI_Reduceall int rank, nproc; MPI_Comm_size(MPI_COMM_WORLD,
c# - 转换十进制？加倍？
我想知道从一种可空类型转换为另一种“兼容”可空类型的最佳方式(从更安全和简洁的意义上说)是什么。具体来说，从十进制转换？加倍？可以使用: public double? ConvertToNullab
mysql - MyISAM 文件大小已增加(加倍)
我的一个表的文件大小(.MYD 文件)增加了大约 100%。如果我查看数据，就会发现过去几天的每日负载正常。是什么导致文件大小增加？ myisamchk 根据用户的建议，我尝试了sudo myisam
mysql - 计算字段上的 SUM 加倍
我有一个 invoices 表。每张发票都有许多 invoice_items 和 transactions(或者，如果您愿意，也可以是“付款”)。对于每张发票，我想计算已支付金额(即其交易金额的总和)
java - 尽可能接近 0 加倍？
我需要一个尽可能接近 0 的值。我需要能够除以这个值，但实际上它应该为 0。 Java 是否提供了一种简单的方法来生成仅设置最低有效位的 double ？还是必须自己计算？ //编辑:一些背景信息，因
javascript - 包含范围内的随机 float 加倍
由于 Math.random ()(以及大多数伪随机数生成器，AFAIK)在 [0,1) 中生成数字: function randomInRange(min, max) { return Math
MYSQL:JOIN 使 SUM 加倍
这应该很容易。相信我，我已经为此研究了几个小时。我的查询: SELECT not_piece.pid, part.name AS 'Part Name', SUM(qty_left) AS 'In S
C++ vector> 加倍 **
我正在尝试传递类型为 vector > 的变量到函数 F(double ** mat, int m, int n) . F 函数来自另一个库，所以我无法更改它。有人可以给我一些提示吗？谢谢。最佳答案
c - 在 C 文件中读取和写入(加倍)
我正在尝试读取一个文件，读取它包含的字节数，然后将其四舍五入到最接近的 GB，然后将文件大小加倍。但是，有没有办法读取文件，然后将所有这些东西重新放入同一个文件中？这是我目前所拥有的，但它创建了一个
C++ vector> 加倍 **
我正在尝试传递类型为 vector > 的变量到函数 F(double ** mat, int m, int n) . F 函数来自另一个库，所以我无法更改它。有人可以给我一些提示吗？谢谢。最佳答案
database - 如何增加/加倍 sqlite 数据库文件的大小
我想对超大 (200+ MB) Sqlite 文件进行一些测试。我有一些相对较小的文件 (10MB)，但我想测试更大的文件。有没有什么快速的方法/工具可以通过复制表中的数据来增加这些 Sqlite
c - 从 unsigned int[2] 加倍？
我有一个 64 位数字，写成两个 32 位未签名的整数:unsigned int[2]。 unsigned int[0] 是 MSB，unsigned int[1] 是 LSB。我如何将它转换为 do
c++ - 类型转换 boost::units::quantity 加倍
我需要将数量的值传递给库进行评估。 boost units library在 SI 中采用双倍值，因此 boost 单位库在确保该要求方面非常有吸引力。但是，我应该如何将数量转换为双倍值？文档和示例似
java - 在 Android 上与 ksoap2 加倍？
如何向 ksoap2 请求添加双重属性？ request.addProperty("doubleProperty", 1.0); 网络上没有明确的答案。最佳答案为了将 double 值作为请求参数
ios - NSDecimalNumber 加倍。在 Swift 中执行此操作的正确方法是什么
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 7 年前。 Improve this qu
javascript - 通过 AJAX 调用生成图像时，图像大小 (.bin) 加倍
我正在尝试从 AngularJS 用 Swing 编写的 REST API 生成 .bin 文件。以下是代码。 var options = { url: 'http://example.com/i
C++ 加倍 : dividing by 100 causes very small error
我对这段代码中的特定值集有疑问。 double inputs[] = {0, -546543, 99015, 6750, 825, 2725, 70475, 50950, 42200, 675
ruby - 为什么 SecureRandom#hex 方法将其长度参数 n 加倍？
我在 ruby on rails 应用程序中尝试为密码生成盐时遇到了 SecureRandom#hex 方法。为什么它会加倍长度参数/坚持返回的字符串长度是偶数？最佳答案该方法生成一个 n 字

首页

博学

6Ren·AI

商城

javascript - 函数内的 setInterval 每秒将 console.log 加倍 - Javascript