求助：实现鼠标闲置10秒触发动画、移动时停止的功能

下面是针对需求的完整解决方案，基于你提供的p5.js动画代码修改：

let isIdle = false;
let timerId;

function setup() {
  createCanvas(800, 800);
  frameRate(0.8);
  strokeWeight(30);
  noLoop(); // 默认停止动画
}

function draw() {
  stroke(random(500), random(195), random(150));
  point(random(800), random(800));
}

function resetIdleTimer() {
  // 清除之前的定时器，避免多个定时器同时生效
  clearTimeout(timerId);
  
  // 如果当前处于闲置动画状态，停止并清空画布
  if (isIdle) {
    isIdle = false;
    noLoop();
    background(255); // 可选：清空画布，恢复初始状态
  }
  
  // 设置新的10秒闲置定时器
  timerId = setTimeout(() => {
    isIdle = true;
    loop(); // 启动动画
  }, 10000); // 10000毫秒 = 10秒
}

// 鼠标移动时重置定时器
function mouseMoved() {
  resetIdleTimer();
}

// 鼠标点击时也重置定时器（避免点击后没移动鼠标误触发）
function mousePressed() {
  resetIdleTimer();
}

// 页面加载完成后启动初始定时器
resetIdleTimer();

关键逻辑说明 #

• 用isIdle变量标记是否进入闲置状态，控制动画的启动/停止
• resetIdleTimer是核心函数：每次鼠标交互时清除旧定时器，停止当前动画（如果在播放），再重新设置10秒后的触发任务
• 利用p5.js的loop()和noLoop()控制draw()函数的执行，这是符合p5.js运行机制的正确方式（新手容易直接用setTimeout调用draw，这会打乱p5的渲染流程）

内容的提问来源于stack exchange，提问作者becky