【发布时间】：2020-09-06 10:17:56
【问题描述】：
我使用 Async/Await 编写了一个简短的脚本，它会在很短的时间间隔后一个一个地打印出字母。根据我所了解的情况，我尝试以多种方式重写代码，期望得到相同的结果，但我无法使这些替代方案中的任何一个起作用。特别是，我认为更改代码中 console.log() 发生的位置会很简单。
这是原始的工作代码：
const welcomeMessage = () => {
const message = 'hello'
const timer = [200,400,200,400,200,400];
// Promisify setTimeout() and feed in counter from sendMessage()
const setTimeoutPromise = num => {
return new Promise(resolve => {
setTimeout(resolve, timer[num]);
})
};
// Async/Await with a For loop calling setTimeoutPromise()
const sendMessage = async () => {
for (count = 0; count < message.length; count++) {
await setTimeoutPromise(count);
console.log(message[count]);
};
};
sendMessage();
}
welcomeMessage();然后我尝试进行一些修改，但都没有奏效。
Mdofication #1：在这个版本中，我认为我可以直接调用并运行 sendMessage() 函数中的代码，而无需稍后调用它。但是，修改后什么都没有发生：
async () => { //No name and removed call to sendMessage() later in code
for (count = 0; count < message.length; count++) {
await setTimeoutPromise(count);
console.log(message[count]);
};
};
const welcomeMessage = () => {
const message = 'hello'
const timer = [200,400,200,400,200,400];
// Promisify setTimeout() and feed in counter from sendMessage()
const setTimeoutPromise = num => {
return new Promise(resolve => {
setTimeout(resolve, timer[num]);
})
};
async () => { //No name and removed call to sendMessage() later in code
for (count = 0; count < message.length; count++) {
await setTimeoutPromise(count);
console.log(message[count]);
};
};
}
welcomeMessage();修改 #2：我还原了代码，然后尝试将 console.log() 函数移动到 setTimeout() 函数中，认为这将在每个循环中调用。使用空 () 和 (resolve) 都被传递到 setTimeout()，它只打印第一个字母。使用 (resolve, num) 表示未定义：
const setTimeoutPromise = num => {
return new Promise(resolve => {
setTimeout((resolve) => {
console.log(message[num]);
resolve;
}, timer[num]);
})
};
const sendMessage = async () => {
for (count = 0; count < message.length; count++) {
await setTimeoutPromise(count);
};
};
const welcomeMessage = () => {
const message = 'hello'
const timer = [200,400,200,400,200,400];
const setTimeoutPromise = num => {
return new Promise(resolve => {
setTimeout((resolve) => {
console.log(message[num]);
resolve;
}, timer[num]);
})
};
const sendMessage = async () => {
for (count = 0; count < message.length; count++) {
await setTimeoutPromise(count);
};
};
sendMessage();
}
welcomeMessage();修改#3：最后，我尝试提前定义一个函数以传递给 setTimeout()，该函数将用于处理“resolve”和 console.log()。我尝试了一些变体，但似乎并没有在循环中进行，因为 console.log() 只被调用了一次。
// New function to handle resolve and the counter
function newFunction(func, num) {
console.log(message[num]);
func;
}
const setTimeoutPromise = num => {
return new Promise(resolve => {
setTimeout(newFunction(resolve, num), timer[num]);
})
};
const sendMessage = async () => {
for (count = 0; count < message.length; count++) {
await setTimeoutPromise(count);
};
};
const welcomeMessage = () => {
const message = 'hello'
const timer = [200,400,200,400,200,400];
// New function to handle resolve and the counter
function newFunction(func, num) {
console.log(message[num]);
func;
}
const setTimeoutPromise = num => {
return new Promise(resolve => {
setTimeout(newFunction(resolve, num), timer[num]);
})
};
const sendMessage = async () => {
for (count = 0; count < message.length; count++) {
await setTimeoutPromise(count);
};
};
sendMessage()
}
welcomeMessage();【问题讨论】：
-
func;不是函数调用（与setTimeout(…)等现有函数调用相比——它需要括号）。async () => {}是一个函数表达式，也缺少一个调用。见stackoverflow.com/questions/8228281/…。 -
resolve;有同样的问题。应该是resolve()。在setTimeout(newFunction(resolve, num), timer[num])，关于setTimeout的正确使用，见stackoverflow.com/questions/7137401/…。 -
在最后的代码中你有错误你调用函数 newFunction 并且什么都不传递给 setTimeout 你需要编写返回函数的函数或将它包装内联
setTimeout(() => newFunction(resolve, num), timer[num]);并且你需要调用该函数func。 -
感谢 Ry- 的回复和有用的链接。我能够让代码运行，并对我的代码的含义有了更多的了解。 @jcubic，也感谢您的解释。