6 秒的 setInterval 执行次数过多

Question

I'm trying to make a program that makes a chrome page light up gradually as the desired time is approached, so that it mimics sun light, and I can wake up using monitor's light more successfully.我正在尝试制作一个程序，使 chrome 页面在接近所需时间时逐渐亮起，以便它模仿太阳光，并且我可以更成功地使用显示器的光唤醒。

I'm using p5.js and my codes are as follows.我正在使用 p5.js，我的代码如下。

index.html:索引.html：

<!DOCTYPE html>
<html>
    <head>
        <script src='../p5.min.js'></script>
        <script src='sketch.js'></script>
    </head>
    <body style="margin:0;">
    </body>
</html>

sketh.js: sketh.js：

function setup(){
    createCanvas(1920, 1076);
    background(0);
}

function draw(){
    var steps = 5;                               // How many steps of brightness I want
    rectMode(CORNERS)
    fill(random(0, 255), random(0, 255), random(0, 255), 40)
    window.setInterval(function(){               // Set interval for checking

        // I added additionally from here ---------------------------------------------
        setTimeout(function() {
            window.location.reload(false);
        }, 2000)
        // Up to here -----------------------------------------------------------------

        var date = new Date();
        var hours = 1;                           // Hour that I want to wake up
        var minutes = 55;                        // Minute that I want to wake up

        var wholeThing = hours * 60 + minutes;
        var currentWholeThing = (date.getHours() * 60 + date.getMinutes());
        var diff = wholeThing -  currentWholeThing;

        if ( diff <= steps && diff >= 0)
        {
            var color = 1 - (diff / steps);
            console.log(color);
            background(Math.floor(255 * color), Math.floor(205 * color), Math.floor(153 * color))
        }

        console.log(date.getHours(), date.getMinutes(), date.getSeconds())
    }, 6000);
}

And I downloaded p5.min.js from here and added the file in the upper directory from these two source files.我从这里下载了 p5.min.js 并从这两个源文件中添加了上层目录中的文件。

And finally, I used code from SO posts here for the idea of capturing the hour and minute.最后，我在这里使用了来自 SO 帖子的代码来捕捉小时和分钟。 But I ran into problem that the main function for checking time and choosing color executed too much.但是我遇到了一个问题，主要的 function 用于检查时间和选择颜色执行太多。 Duplicate final console.log appeared many times at each second.(Not to mention I intended that the whole function executing every 6 seconds)重复的最终 console.log 每秒出现多次。（更不用说我打算让整个 function 每 6 秒执行一次）

So I looked up here to solve the problem, and I added the code between '//-----------------' comments.于是查到这里解决问题，在'//-----------------'注释之间加了代码。 but it seems it didn't work.但它似乎没有用。 At first it seems like it works in a sense that it refreshes all the logs ones in 2 or 3 seconds(even though duplicate logs appear multiple times during the period) and when the if statement is met even this feature disappears.起初，它似乎在某种意义上可以在 2 或 3 秒内刷新所有日志（即使在此期间重复日志出现多次），并且当满足 if 语句时，即使此功能也会消失。 Finally chrome ate all the memories and it froze.(I don't see why it started to use so much memory though)最后铬吃了所有的记忆，它冻结了。（我不明白为什么它开始使用这么多 memory）

How can I make my function to execute just ones in every 6 seconds so that it doesn't waste computing power?如何让我的 function 每 6 秒执行一次，以免浪费计算能力？

Answer 1

The problem is draw function is being executed on every frame by p5.js .问题是绘制 function 正在由p5.js在每一帧上执行。 You should move out setInterval logic to the setup method instead.您应该将 setInterval 逻辑移到 setup 方法中。 It would compute color and assign it to variable.它将计算颜色并将其分配给变量。 Use that variable inside draw method to draw background.在 draw 方法中使用该变量来绘制背景。

Answer 2

setInterval takes a function and a time interval as parameters. setInterval以 function 和时间间隔作为参数。 The browser, if possible, will be calling the passed function every t number of milliseconds, if possible.如果可能，浏览器将每隔 t 毫秒调用一次传递的 function（如果可能）。 However, if the browser is too busy, then it will not be able to call it at the exactly scheduled times.但是，如果浏览器太忙，那么它将无法在准确的预定时间调用它。

When you have too many setIntervals working, then your browser will quickly become overwhelmed by them.当你有太多的 setIntervals 工作时，你的浏览器很快就会被它们淹没。 When you no longer need a function to be executed regularly, you can get rid of it via clearInterval, like:当您不再需要定期执行 function 时，您可以通过 clearInterval 摆脱它，例如：

var currentInterval;
function draw() {
    if (currentInterval) clearInterval(currentInterval);
    currentInterval = setInterval(function() {
        //...
    }, 6000);
}

6 秒的 setInterval 执行次数过多

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-04-25 17:39:29

解决方案2
0 2020-04-25 18:44:44

6 秒的 setInterval 执行次数过多

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-04-25 17:39:29

解决方案2 0 2020-04-25 18:44:44

解决方案1
1 已采纳 2020-04-25 17:39:29

解决方案2
0 2020-04-25 18:44:44