为何两段QR Code Scanner代码执行结果存在差异？

核心差异在于传递给setTimeout的参数类型：立即执行的函数调用 vs 待执行的函数引用/箭头函数。

第一个版本的问题 #

假设你的第一个版本代码逻辑类似这样：

function decodeQRCode() {
  const scanSuccess = takePicture(); // 扫描二维码，成功返回true并打印"success"
  if (scanSuccess) {
    console.log("success");
    // 错误写法：立即执行decodeQRCode，而非延迟调用
    setTimeout(decodeQRCode(), 3000);
  }
}

这里setTimeout(decodeQRCode(), 3000)的写法会立刻执行decodeQRCode函数，并把函数的返回值传给setTimeout当回调。因为二维码在视野中时scanSuccess始终为true，每次执行decodeQRCode都会无延迟地再次调用自己，形成无限循环，所以会持续打印"success"直到二维码移开。

第二个版本的正确逻辑 #

用箭头函数包裹后，代码逻辑变成：

function decodeQRCode() {
  const scanSuccess = takePicture();
  if (scanSuccess) {
    console.log("success");
    // 正确写法：传递箭头函数引用，3秒后才执行内部的decodeQRCode调用
    setTimeout(() => decodeQRCode(), 3000);
  }
}

这里你传给setTimeout的是一个箭头函数引用，而非立即执行的函数调用。setTimeout会在3秒后才执行这个箭头函数，箭头函数内部再触发下一次decodeQRCode扫描。这样就给两次扫描之间加上了3秒延迟，实现了每3秒扫描一次的预期效果。

本质总结 #

setTimeout的第一个参数要求是可执行的函数引用（不带()的函数名、匿名函数或箭头函数）。如果给函数加上()，就会立即执行该函数，并把执行结果作为回调传给setTimeout——如果函数没有返回可执行的函数，就完全达不到延迟执行的目的。

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