Question

所以我试图掌握JavaScript并练习我尝试进行反应时间测试。这个想法非常简单：你点击一个按钮，在一段随机的时间后，背景会改变颜色，然后你必须点击第二个按钮，它会调用一个计算你的反应时间的函数。这是我的JavaScript代码：

function start(){
    console.log(start);
    var rndnr = (Math.round(Math.floor(Math.random() * 5) + 1)) * 1000);
    setTimeout(function timeout() {
      document.bgColor="ffff00";
      start = new Date();
    }, rndnr);
}

function stop() {
    var onclick = new Date();
    var time = onclick-start;
    var total;
    var avg;
    var count = 1;
    document.getElementById("try 1").innerHTML = time;
    total = total + time;
    avg = total / count;
    count = count + 1;
    document.getElementById("avg1").innerHTML = avg;
}

这些是我的按钮：

<button id="button" onclick="start()" >start</button>
<button onclick="stop()">stop</button>

当我尝试执行脚本时，我在控制台日志中收到一条错误，上面写着：ReferenceError: start is not defined。我哪里出错？

Answer 1

要确保文档知道start函数，请执行以下操作：

window.start = function start(){ ... };

或者确保在分配处理程序之前加载脚本。

其次，不要尝试设置一个值来启动，因为start指的是一个函数。请改用startTime或其他变量。

startTime = new Date();

Answer 2

您的代码中存在相当多的拼写错误以及一些命名冲突和范围问题。这是您的原始代码（除了在浏览器中将stop重命名为stopF之后。

function start() {
  console.log(start);
  // THE REFERENCE ERROR STEMS FROM THIS LINE PREVENTING THE FUNCTIONS
  //  FROM BEING DEFINED
  var rndnr = (Math.round(Math.floor(Math.random() * 5) + 1)) * 1000);
  setTimeout(function timeout() {
    document.bgColor = "ffff00";
    start = new Date();
  }, rndnr);
}

function stopF() {
  var onclick = new Date();
  var time = onclick - start;
  var total;
  var avg;
  var count = 1;
  document.getElementById("try 1").innerHTML = time;
  total = total + time;
  avg = total / count;
  count = count + 1;
  document.getElementById("avg1").innerHTML = avg;
}

<button id="button" onclick="start()">start</button>
<button onclick="stopF()">stop</button>
<div id="try 1"></div>
<div id="avg1"></div>

如果您点击“运行代码段”，您会在控制台中发现错误：

 Uncaught SyntaxError: Unexpected token )

由于此错误，start和stopF均未定义。因此，当单击开始按钮时，将评估内联JS，然后尝试查找不存在的start函数，从而生成ReferenceError。同样，如果单击停止按钮，它也会记录ReferenceError的{{1}}。

纠正代码中的一些问题：

stopF

// You need to have a way of referencing the `start` variable (now `startTime`)
//  between the `start` and `stop` functions.
// You also need to be able to keep state for `total` and `count` between
//  subsequent calls to `stop`
// These issues can be solved by using scope variables
//  (here they are in the IIFE scope of the wrapper function)
var startTime;
var total = 0;
var count = 0;

// You had a name collision here within the scope of `start`
//  you also had attempted to use a variable named `start`
// Now the variable is called `startTime`
function start() {
  // You had an extra ')' in your expression assignment for `rndnr`
  var rndnr = (Math.round(Math.floor(Math.random() * 5) + 1) * 1000);
  setTimeout(function timeout() {
    document.bgColor = "ffff00";
    startTime = new Date();
    // Since setTimeout is an async function console.log would be undefined
    //  until this function runs
    console.log(startTime);
  }, rndnr);
}

function stop() {
  var onclick = new Date();
  var time = onclick - startTime;
  var avg;
  total += time;
  avg = total / ++count;

  // You shouldn't include spaces in ID values as it can be confusing
  //  if this was intentional
  document.getElementById("try1").innerHTML = time;
  document.getElementById("avg1").innerHTML = avg;
  document.bgColor = "ffffff";
}

Answer 3

编辑：

以下是您的代码的工作版本（只有停止按钮需要标记＆＃34;尝试1＆＃34;以及＆＃34; avg＆＃34;）

http://jsfiddle.net/2q84yvzu/

问题在于额外的）：

var rndnr = (Math.round(Math.floor(Math.random()*5)+1))*1000);

这是正确的版本：

var rndnr = (Math.round(Math.floor(Math.random()*5)+1))*1000;

我改变了将事件绑定到元素的方式，不是将事件嵌入内联的好习惯。而是尝试下一种方法：

document.getElementById('start').onclick=function(){start();};
document.getElementById('stop').onclick=function(){stop();};

有关这方面的更多信息，这是另一个问题：

Inline onclick JavaScript variable

Answer 4

var rndnr = (Math.round(Math.floor(Math.random()*5)+1))*1000);

语法错误，应该是

var rndnr = (Math.round(Math.floor(Math.random()*5)+1))*1000;

Answer 5

您需要在setTimeout函数中重命名变量start，因为在第一次调用start()函数后，您将使用日期值覆盖函数start。

＆＃13;

function f(){
    setTimeout(function(){ f = 1; }, 1000);
}

console.log(f); // function

f();

setTimeout(function(){ 
  console.log(f); // 1
}, 1100);

＆＃13;

Answer 6

console.log(start);

错了

必须是

console.log("start");

或者您必须创建变量start

var start = "put anything in here";
console.log(start);

javascript函数未定义但我的脚本正在加载

6 个答案: