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

Question

所以我正在尝试掌握 JavaScript 并练习我正在尝试进行 react 时间测试。这个想法非常简单:你点击一个按钮，在一段随机的时间后背景改变颜色，然后你必须点击第二个按钮，它调用一个计算你的 react 时间的函数。这是我的 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

您的代码中有很多拼写错误以及一些命名冲突和范围问题。这是您的原始代码(除了在浏览器中将 stop 重命名为 stopF 之外 stop is a global function。

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。同样，如果单击停止按钮，它也会为 stopF 记录一个 ReferenceError。

更正代码中的一些问题可以得到:

// 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";
}

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