CodeHS中Javascript异步输入无法存储的问题求解

一、正确使用readIntAsync获取并存储输入 #

readIntAsync是异步函数，它不会直接返回结果，必须通过回调函数接收用户输入的值。如果直接尝试用let input = readIntAsync();赋值，肯定拿不到有效结果——因为异步函数执行时，输入值还未生成。

正确写法是把存储和业务逻辑放在回调里，或是将输入值存入全局/闭包变量：

let circle = new Circle(50);
circle.setPosition(100, 100);
add(circle);

// 用于存储输入的变量
let moveDistance = 0;

// 通过回调获取并存储输入
readIntAsync("请输入移动距离", function(input) {
    moveDistance = input;
    // 立即使用输入值执行逻辑，比如移动圆形
    circle.move(moveDistance, 0);
});

// 后续非阻塞代码可正常执行，比如添加动态效果
setInterval(function() {
    circle.setColor(randomColor());
}, 1000);

如果需要循环收集多次输入，可以把readIntAsync的调用放在回调里形成递归循环：

let totalInputs = [];
let inputCount = 0;
const MAX_INPUTS = 3;

function collectInput() {
    if (inputCount >= MAX_INPUTS) {
        // 输入收集完成，处理数据
        console.log("收集到的输入：", totalInputs);
        return;
    }
    readIntAsync(`请输入第${inputCount+1}个数字`, function(input) {
        totalInputs.push(input);
        inputCount++;
        // 递归调用，继续收集下一个输入
        collectInput();
    });
}

// 启动输入收集流程
collectInput();

二、用DOM元素实现非阻塞输入（更灵活） #

如果回调方式不符合需求，还可以直接在CodeHS页面中添加文本输入框和按钮，通过监听事件获取输入，完全非阻塞：

// 创建输入框和确认按钮
let inputBox = document.createElement("input");
inputBox.type = "number";
inputBox.placeholder = "输入移动距离";
document.body.appendChild(inputBox);

let submitBtn = document.createElement("button");
submitBtn.textContent = "确认移动";
document.body.appendChild(submitBtn);

let circle = new Circle(50);
circle.setPosition(100, 100);
add(circle);

// 监听按钮点击，获取并使用输入值
submitBtn.addEventListener("click", function() {
    let distance = parseInt(inputBox.value);
    if (!isNaN(distance)) {
        circle.move(distance, 0);
        // 清空输入框，方便下次输入
        inputBox.value = "";
    }
});

// 同时运行其他非阻塞逻辑
setInterval(function() {
    circle.setPosition(circle.getX() + 1, circle.getY());
}, 50);

这种方式完全不阻塞代码执行，还能随时响应用户输入，适合需要多次交互的场景。

内容的提问来源于stack exchange，提问作者Graham H.