代码之家 › 专栏 › 技术社区 › Ghoyos

想知道为什么我的代码中的“setinterval”不起作用吗?

css html javascript

Ghoyos · 技术社区 · 6 年前

我试图在画布中使用javascript控制绘制对象的刷新率。我已经看过了 W3.学校 关于如何清除屏幕和使用画布的设置间隔的解释和示例,但我不确定以下原因“ setInterval “实际上不是在运行” generateGame() “每1秒运行一次。

buildCanvas();

  function buildCanvas(){
    let c = document.getElementById('myCanvas');
    let drwMthd = c.getContext('2d');

    setInterval(generateGame(c, drwMthd), 1000);

    function generateGame(c, drwMthd){
      refreshC(c, drwMthd);
      drawObjects(drwMthd);
      console.log('reset');
    }
  }

  function refreshC(c, drwMthd){
    drwMthd.clearRect(0, 0, c.width, c.height);
    console.log('all cleared');
  }

  function drawObjects(drwMthd){
    boxGenerator(10, 10, 10, 10, "green", drwMthd);
    boxGenerator(1, 1, 10, 10, "green", drwMthd);
    console.log('all drawn');
  }

  function boxGenerator(top, left, width, height, color, drwMthd){
    drwMthd.fillStyle = color;
    drwMthd.fillRect(top, left, width, height, color);
  }

    body {
      background-color: black;
    }

  <canvas id="myCanvas" width="300" height="60" style="background-color: white">

我也用了 console.log 每1秒钟打印一次重置,以测试是否是实际的绘图造成了间隔的混乱。

function buildCanvas(){
    let c = document.getElementById('myCanvas');
    let drwMthd = c.getContext('2d');

    setInterval(generateGame(c, drwMthd), 1000);

    function generateGame(c, drwMthd){
      refreshC(c, drwMthd);
      drawObjects(drwMthd);
      console.log('reset');
    }
}

3 回复 | 直到 6 年前

Guillaume Georges 6 年前

setInterval 需要函数引用。问题是,您没有传递函数引用,而是调用 generateGame 功能。从那以后 生成名称 函数不显式返回任何内容,它返回 undefined . 所以你要设置一个未定义函数的间隔。

解决方案是传递一个调用generategame函数的匿名函数:

setInterval(function () {
    generateGame(c, drwMthd)
    }, 1000);

function buildCanvas(){
    let c, drwMthd;
    /*let c = document.getElementById('myCanvas');
    let drwMthd = c.getContext('2d'); */

    setInterval(function () {
    generateGame(c, drwMthd)
    }, 1000);

    function generateGame(c, drwMthd){
    /*
      refreshC(c, drwMthd);
      drawObjects(drwMthd);*/
      console.log('reset');
    }
}
buildCanvas();

Emil S. Jørgensen 6 年前

你执行 generateGame 函数而不是绑定它,然后 setInterval 处理其返回值,即 void .

要传递参数,需要使用 bind 关键字。注意,第一个元素是 this 该功能应与一起工作。

function buildCanvas() {
    var canvas = document.createElement('canvas');
    var drawMethod = canvas.getContext('2d');
    setInterval(generateGame.bind(this, canvas, drawMethod), 1000);
    function generateGame(c, drwMthd) {
        console.log(c, drwMthd);
    }
}
buildCanvas();

Vishal 6 年前

请参阅下面的小提琴

Fiddle

setInterval(function(){
    generateGame(c, drwMthd)
}, 1000);