本文详解 JavaScript 中 setTimeout 的常见误用问题，以及如何准确筛选尚未设置图片的 DOM 元素——以实现 Tic Tac Toe 游戏中玩家落子后延时由电脑随机选择空位的核心逻辑。
本文详解 javascript 中 `settimeout` 的常见误用问题，以及如何准确筛选尚未设置图片的 dom 元素——以实现 tic tac toe 游戏中玩家落子后延时由电脑随机选择空位的核心逻辑。
在实现井字棋（Tic Tac Toe）游戏时，一个关键逻辑是：玩家点击一个 <img> 格子后，为其设置 "X" 图片；1 秒后，电脑应在剩余未被占用的格子中随机选择一个，设置 "O" 图片。但你遇到的问题是：computerChoice() 在点击瞬间就被立即执行（而非延迟 1 秒），且 for...of 循环中 cell.src != "..." 判断始终为 true，导致所有格子都被打印——这背后有两个根本性错误：
❌ 错误一：setTimeout 调用方式错误
原代码：
setTimeout(1000, computerChoice());
这行代码立即执行了 computerChoice()（因为末尾的 () 表示调用），并将它的返回值（undefined）传给 setTimeout 作为第二个参数；而第一个参数 1000 被误当作回调函数（实际应为函数引用）。setTimeout 正确用法是：第一个参数必须是函数引用或匿名函数，第二个参数才是毫秒数。
✅ 正确写法：
setTimeout(computerChoice, 1000); // 传入函数名（不带括号） // 或 setTimeout(() => computerChoice(), 1000); // 传入箭头函数
❌ 错误二：src 属性比较不可靠
<img> 元素的 .src 属性返回的是完整绝对 URL（如 https://example.com/Small_uppercase_letter_X.svg.png），而非你写的相对路径字符串。因此 cell.src != "Small_uppercase_letter_X.svg.png" 几乎永远为 true，导致所有格子都被视为“未占用”。
✅ 更健壮的判断方式：
- 使用 .getAttribute('src') 获取原始 HTML 中的相对路径；
- 或更推荐：为已落子的格子添加 data-state="X" / data-state="O" 属性，避免依赖 URL 字符串匹配。
✅ 优化后的完整逻辑（含防御性检查与可扩展性）
const cells = document.querySelectorAll("img");
function manChoice() {
// 防止重复点击已落子格子
if (this.getAttribute('data-state')) return;
this.setAttribute('data-state', 'X');
this.src = "Small_uppercase_letter_X.svg.png";
// 延迟 1 秒后调用电脑逻辑（注意：传函数引用，不加括号）
setTimeout(computerChoice, 1000);
}
// 为每个格子绑定事件
cells.forEach(cell => cell.addEventListener("click", manChoice));
function computerChoice() {
// 筛选 data-state 为空的格子（即未落子）
const availableCells = Array.from(cells).filter(
cell => !cell.getAttribute('data-state')
);
if (availableCells.length === 0) return; // 棋盘已满
// 随机选取一个空格
const randomCell = availableCells[
Math.floor(Math.random() * availableCells.length)
];
randomCell.setAttribute('data-state', 'O');
randomCell.src = "Small_uppercase_letter_O.svg.png";
}? 关键注意事项：
- 永远不要直接比较 img.src 字符串：浏览器会自动补全为绝对路径，导致匹配失败；
- 添加 data-state 是最佳实践：语义清晰、性能可靠、便于后续状态管理（如胜负判定）；
- 点击前校验状态：避免玩家多次点击同一格子覆盖逻辑；
- setTimeout(fn, delay) 中 fn 必须是函数引用，fn() 是立即执行。
通过以上修正，computerChoice() 将真正延迟执行，且只作用于未被占用的格子——这才是井字棋人机交互逻辑的正确起点。
