setInterval with 6 seconds way too much executes

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.

I'm using p5.js and my codes are as follows.

index.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 :

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.

And finally, I used code from SO posts here for the idea of capturing the hour and minute. But I ran into problem that the main function for checking time and choosing color executed too much. Duplicate final console.log appeared many times at each second.(Not to mention I intended that the whole function executing every 6 seconds)

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. Finally chrome ate all the memories and it froze.(I don't see why it started to use so much memory though)

How can I make my function to execute just ones in every 6 seconds so that it doesn't waste computing power?

how often is draw() called? if its called often you will be making many timeouts — Patrick Evans, Apr 25 '20 at 17:15
@PatrickEvans draw() is called very often too. at least 50 times a second — , Apr 25 '20 at 17:18

score 1 · Accepted Answer · answered Apr 25 '20 at 17:39

1

The problem is draw function is being executed on every frame by p5.js. You should move out setInterval logic to the setup method instead. It would compute color and assign it to variable. Use that variable inside draw method to draw background.

answered Apr 25 '20 at 17:39

Alex

1,724
13
25

score 0 · Answer 2 · answered Apr 25 '20 at 18:44

setInterval takes a function and a time interval as parameters. The browser, if possible, will be calling the passed function every t number of milliseconds, if possible. 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. When you no longer need a function to be executed regularly, you can get rid of it via clearInterval, like:

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

setInterval with 6 seconds way too much executes

2 Answers2