Javascript 执行一个函数5秒钟

我试图在p5.js中创建一个加载条，在上面有一个加载条，就像YouTube加载条一样

像这样

var x = 0;
function setup() { 
  createCanvas(400, 400);
    x = width;
} 
function draw() { 
  background(220);
    stroke(255,0,0);
    strokeWeight(10);
    line(0,0,x,0);
}

我想使用

map（）

函数来减少行的宽度

map(x, width , 0 , second(),second()+5);

---

注意：使用p5.js库

首先

x

不应等于

宽度

。它应该从

0

开始，然后仅根据时间进行更新

secondary

second（）

返回当前时间的实际秒数，因此不适合这种情况。最好使用

millis（）

，它返回项目启动后的毫秒数

最后，您使用的

map

参数是错误的（或者至少我不明白您试图对传递它们的顺序做什么）

上面将把毫秒范围

0-5000

（0到5秒）映射到画布的

0-width

---

要能够在任何时候初始化条形图，请使用变量作为值范围的开始/结束值

var x,
    startAt;

function setup() {
  createCanvas(400, 400);
  startAt = millis();
}

function draw() {
  background(220);
  stroke(255, 0, 0);
  strokeWeight(10);

  x = map(millis(), startAt, startAt + 5000, 0, width);
  line(0, 0, x, 0);
}

function mouseClicked() {
  startAt = millis();
}

在本例中，无论何时单击，该条都将重新启动

---

工作示例位于

使用so snippet或fiddler添加一个功能示例。@VipinKumar查看问题中的链接请在交叉柱之间链接，这样人们就不会浪费时间重复您已经收到的建议：@KevinWorkman我无意浪费任何人的时间。在这里提问之前，我在处理论坛上问了这个问题。在我看来，向不同的人提问和学习没有什么错，因为每个人都有自己的方法。如果我冒犯了任何人，我对此感到抱歉。@Rehan我唯一的一点是，现在你在这里有了答案，任何在处理论坛上回答你而没有看到这个答案的人都是在浪费时间。可以在多个地方发布，但请在这些帖子之间链接，这样我们就可以看到其他地方已经说过的内容。这只适用于项目开始的5秒钟，但是我想在正在运行的项目中的任何给定点显示加载条。@Rehan然后使用一个变量，该变量在开始时初始化为

millis（）

，结束时初始化为+5000。@Rehan我更新了示例以支持这一点。当你点击鼠标（例如）时，它会重新启动。你真是太好了。谢谢你的帮助。谢谢。

var x,
    startAt;

function setup() {
  createCanvas(400, 400);
  startAt = millis();
}

function draw() {
  background(220);
  stroke(255, 0, 0);
  strokeWeight(10);

  x = map(millis(), startAt, startAt + 5000, 0, width);
  line(0, 0, x, 0);
}

function mouseClicked() {
  startAt = millis();
}