我正在尝试制作一个程序，使铬页面随着接近所需时间而逐渐点亮，从而模仿日光，这样我可以更成功地使用监视器的光来唤醒。
我正在使用p5.js，我的代码如下。
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);
}
我从here下载了p5.min.js，并从这两个源文件中将文件添加到了上层目录中。
最后，我使用SO帖子here中的代码来捕获小时和分钟。但是我遇到了一个问题，即检查时间和选择颜色的主要功能执行得太多。重复的最终console.log每秒出现多次。（更不用说我希望整个功能每6秒执行一次）
所以我抬起头来here解决了这个问题，然后在“ // -----------------”注释之间添加了代码。但似乎没有用。乍一看，从某种意义上说，它在2或3秒钟内刷新了所有日志（即使重复的日志在此期间出现了多次），并且在满足if语句时，甚至此功能也消失了。最终，chrome吞噬了所有的内存，然后冻结了。（我不明白为什么它开始使用那么多的内存）
如何使我的函数每6秒执行一次，以免浪费计算能力？
问题是p5.js在每帧上执行绘图功能。您应该将setInterval逻辑移到setup方法中。它将计算颜色并将其分配给变量。在draw方法中使用该变量绘制背景。
setInterval将函数和时间间隔作为参数。如果可能，浏览器将每t毫秒（如果可能）调用传递的函数。但是，如果浏览器太忙，那么它将无法在确切的计划时间调用它。
当setIntervals工作太多时，您的浏览器将很快被它们淹没。当您不再需要定期执行函数时，可以通过clearInterval摆脱它，例如：
var currentInterval;
function draw() {
if (currentInterval) clearInterval(currentInterval);
currentInterval = setInterval(function() {
//...
}, 6000);
}