如何让一个函数只运行一次？

Question

我想在 canvas 上呈现固定数量的圆圈（在本例中为 10 个），并带有一条左右移动的线，循环函数运行的每一帧都会触发圆圈函数，因此是否存在一种阻止这种行为的方法。我什至不确定我的想法是否正确，让圆圈发射一次。

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

fetch("http://api.open-notify.org/astros.json")
  .then((res) => res.json())
  .then((data) => {
    var x = 0;
    var s = 1;
    function circles() {
      for (var i = 0; i < data.number; i++) {
        let randW = Math.floor(Math.random() * (290 - 10) + 10);
        let randH = Math.floor(Math.random() * (140 - 10) + 10);
        ctx.beginPath();
        ctx.fillStyle = "red";
        ctx.arc(randW, randH, 5, 0, 2 * Math.PI);
        ctx.fill();
        ctx.beginPath();
      }
    }
    function draw() {
    //   ctx.clearRect(0, 0, canvas.width, canvas.height); // // use with setInterval(draw,10)
      circles();
      ctx.fill();
      ctx.beginPath();
      ctx.moveTo(x, 0);
      ctx.lineTo(x, canvas.height);
      x += s;
      ctx.strokeStyle = "white";
      ctx.stroke();
      if (x == canvas.width || x == 0) {
        s = s * -1;
      }
    }
    // setInterval(draw, 10);
    function loop() {
        ctx.clearRect(0,0,canvas.width, canvas.height);
        draw();
        requestAnimationFrame(loop);
    }
    requestAnimationFrame(loop);
  });

Answer 1

请检查使用 2 个不同 canvas 元素和绘图函数的单独用法的方法：

const canvas = document.querySelector(".canvas-1");
const ctx = canvas.getContext("2d");

const canvas2 = document.querySelector(".canvas-2");
const ctx2 = canvas2.getContext("2d");

// fetch("http://api.open-notify.org/astros.json")
//   .then((res) => res.json())
//   .then((data) => {
const data = JSON.parse('{"message": "success", "people": [{"name": "Mark Vande Hei", "craft": "ISS"}, {"name": "Pyotr Dubrov", "craft": "ISS"}, {"name": "Anton Shkaplerov", "craft": "ISS"}, {"name": "Zhai Zhigang", "craft": "Shenzhou 13"}, {"name": "Wang Yaping", "craft": "Shenzhou 13"}, {"name": "Ye Guangfu", "craft": "Shenzhou 13"}, {"name": "Raja Chari", "craft": "ISS"}, {"name": "Tom Marshburn", "craft": "ISS"}, {"name": "Kayla Barron", "craft": "ISS"}, {"name": "Matthias Maurer", "craft": "ISS"}], "number": 10}');
var x = 0;
var s = 1;

function circles() {
  for (var i = 0; i < data.number; i++) {
    let randW = Math.floor(Math.random() * (290 - 10)  + 10);
    let randH = Math.floor(Math.random() * (140 - 10) + 10);
    ctx.beginPath();
    ctx.fillStyle = "red";
    ctx.arc(randW, randH, 5, 0, 2 * Math.PI);
    ctx.fill();
    ctx.beginPath();
  }
}
function draw() {
  //   ctx.clearRect(0, 0, canvas.width, canvas.height); // // use with setInterval(draw,10)
  // circles();
  ctx2.fill();
  ctx2.beginPath();
  ctx2.moveTo(x, 0);
  ctx2.lineTo(x, canvas.height);
  x += s;
  ctx2.strokeStyle = "white";
  ctx2.stroke();
  if (x == canvas2.width || x == 0) {
    s = s * -1;
  }
}
circles();
function loop() {
  ctx2.clearRect(0,0,canvas.width, canvas.height);
  draw();
  requestAnimationFrame(loop);
}
loop();

canvas {
  height: 500px;
  width: 500px;
  border: solid 1px;
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
}

<canvas class="canvas-1"></canvas>
<canvas class="canvas-2"></canvas>

如何让一个函数只运行一次？

how to make a function runs only once?

javascript

canvas