实现数字生成完成后打印消息时遇TypeError: callback不是函数错误

错误原因 #

你遇到的callbacks.js:13 Uncaught TypeError: callback is not a function错误，核心问题是定时器调用gen函数时没有传入回调参数。代码里var a = setInterval(gen, 1000);这行，定时器每次执行gen时，并没有传递callback参数，导致gen里的callback()调用时，callback是undefined，触发类型错误。

另外代码里还有两个小问题：

1. 一开始手动调用gen(printMessage)会导致页面加载时直接生成数字1，定时器后续从2开始计数，不符合预期
2. printMessage里的字符串拼写错误：Succesfully应该是Successfully

修复后的代码 #

callbacks.html（无需修改）

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>JS - Asynchronous - Callbacks</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h3>Number generator till 15</h3>
    <p id="num"></p>
    <h3>Message</h3>
    <p id="msg"></p>
    <script src="callbacks.js" charset="utf-8"></script>
</body>
</html>

callbacks.js

let n = 0;
let intervalId;

function gen(callback) {
  n = n + 1;
  document.getElementById('num').innerHTML = n;
  
  if (n === 10) {
    clearInterval(intervalId);
    // 仅在数字达到10时执行回调
    callback();
  }
}

function printMessage() {
  document.getElementById('msg').innerHTML = 'Successfully generated 10 numbers';
}

// 用匿名函数包裹，确保每次执行gen都传入回调参数
intervalId = setInterval(() => gen(printMessage), 1000);

修改说明 #

1. 调整定时器调用方式：用() => gen(printMessage)替代直接传gen，确保定时器每次执行gen时都传入printMessage回调函数
2. 仅在n === 10时调用回调，符合你“数字到10后显示消息”的需求
3. 移除了不必要的gen(printMessage)手动调用，避免初始计数异常
4. 修正了字符串拼写错误，调整变量声明顺序提升代码可读性

内容的提问来源于stack exchange，提问作者pavani lakshmi