Question

我正在创建一个使用HTML5 Canvas将几何图形绘制到窗口的网站。我有一个“绘图”函数，我将其传递给使用requestAnimationFrame命令的函数，如下所示：

function animate(drawMe) {
  var requestAnimationFrame =  
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    function(callback) {
      return setTimeout(callback, 10);
    };

  //draw the function that has been passed through
  drawMe();

  requestAnimationFrame(animate);
}

但请检查一下：当我打电话给“drawMe（）;”在上面的代码中，已经传递的函数执行得很好，但也给出了错误“Uncaught TypeError：number is a function”。如果我包含“console.log（typeof drawMe）”行;控制台将打印出两个结果，“功能”，然后“数字”。

例如，我可以有一个非常简单的函数：

drawloop1 = function() {
  //draws a Rect to my canvas context
  cxt.drawRect(0,0,100,100);
}

为了确保我做得对，我运行“console.log（typeof drawloop1）;”这打印“功能”，这是我所期待的。然后我将它传递给我的动画函数，如下所示：

animate(drawloop1);

这似乎很直截了当。但是一旦它进入“动画”，它就会开始返回“功能”和“数字”。它按预期工作，但也抛出TypeError。我尝试过不同的变量名，担心某处有重复的变量。有人可以向我解释这里发生了什么吗？

Answer 1

问题是这一行：

requestAnimationFrame(animate);

...告诉requestAnimationFrame调用animate()函数，但requestAnimationFrame并不知道将drawMe作为参数传递。实际上它作为参数传递的内容是一个数字，DOMHighResTimeStamp，documented by MDN。

控制台将打印出两个结果，＆＃34;功能＆＃34;然后＆＃34;数字＆＃34;。

这两个来自同一个电话的结果不是两个。它是成功第一次呼叫的一个日志，然后是第二次呼叫失败的第二个日志。

第一个时间animate()运行，当您直接调用它时，drawMe实际上会引用它可以调用的函数。 第二个时间animate()在requestAnimationFrame()调用时运行，drawMe参数为数字。

想到解决问题的第一种方法如下：

function animate(drawMe) {
  var requestAnimationFrame =  
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    function(callback) {
      return setTimeout(callback, 10);
    };

  (function nextFrame() {
    drawMe();
    requestAnimationFrame(nextFrame);
  })();
}

即，在animate()内创建一个可以访问animate()参数的本地函数，并将该本地函数传递给requestAnimationFrame()。

“未捕获的TypeError：数字不是函数” - JavaScript对象返回两种类型？

1 个答案: