Question

我试图在画布中使用javascript控制绘制对象的刷新率。我已经查看了 w3.school 解释和示例，了解如何清除屏幕并使用关于画布的设置间隔，但我不确定为什么以下＆＃34; {{1} }＆＃34;实际上并没有运行＆＃34; setInterval＆＃34;每1秒发挥一次功能。

＆＃13;

generateGame()

＆＃13;

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);
  }

＆＃13;

    body {
      background-color: black;
    }

＆＃13;

我还使用 <canvas id="myCanvas" width="300" height="60" style="background-color: white">每1秒打印一次重置，以测试它是否是实际绘图中间隔时间。

console.log

Answer 1

generateGame需要一个函数引用。问题是您没有传递函数引用，而是调用generateGame函数。由于undefined函数未显式返回任何内容，因此返回setInterval(function () { generateGame(c, drwMthd) }, 1000);。所以你要设置一个未定义函数的间隔。

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

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();

{{1}}

Answer 2

您执行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();

Answer 3

请参阅以下小提琴

Fiddle

function websearch() {
  // Prompt the user for a search term
  var websearchTerm = Browser.inputBox("Enter the keyword to search for:");

  // Get the active spreadsheet and the active sheet
  var wss = SpreadsheetApp.getActiveSpreadsheet();
  var wsheet = wss.getActiveSheet();

  // Set up the spreadsheet to display the results
  var theaders = [["Name", "Title", "Web Address"]];
  wsheet.clear();
  wsheet.getRange("A1:C1").setValues(theaders);

  // Search the webpages associated with the given URL 
  var site = SitesApp.getSite("https://sites.google.com/a/umich.edu/hb-ua/");
  //var matches = site.search(websearchTerm);
  var matches = site.search("fullText contains '"+websearchTerm.replace("'","\'")+"'");

  var woutput = [];
  // Loop through the results and get the file name, file title, and URL
  while (site.hasNext()) {
    var wfile = site.next();
    var wname = wfile.getName();
    var wtitle = wfile.getTitle();
    var wurl = wfile.getUrl();
    // push the file details to our output array (essentially pushing a row of data)
    woutput.push([wname, wtitle, wurl]);
  }
  // write data to the sheet
  wsheet.getRange(2, 1, woutput.length, 3).setValues(woutput);

}

想了解为什么这个＆＃34; setInterval＆＃34;在我的代码不工作？

3 个答案: