此标题可能不大。我试图了解回调函数,并且想知道如何在不丢失for循环的情况下实现以下代码中的hint()替换?
for(i=0;i<4;i++){
let x = prompt("Input an integer");
// store input into an array
}
我尝试过类似的事情:
for(let i = 0; i<4; i++){
let x = document.getElementById("someId");
x.addEventListener("click", rcvInput(function(i){
if(i == 3){
x.removeEventListener("click", rcvInput)
}
}));
}
function rcvInput(callback){
//store input into an array
callback();
}
我知道这可以在没有for循环的情况下完成,我很好奇回调函数是否能够暂停循环并等待输入?
答案 0 :(得分:1)
根据您的最终目标,我很确定有更好的方法来做到这一点。但是为了做到这一点:
您可以创建一个返回承诺的方法,该承诺将在单击发生时解决。然后,您可以使用async
/ await
来完成所需的工作。
通过在其上使用Promise
和await
,您可以从技术上“暂停” for
循环,直到发生某些情况为止。在这种情况下,请单击。
请记住,包围for
循环的方法必须为async
。
function getClick() {
return new Promise(acc => {
function handleClick() {
document.removeEventListener('click', handleClick);
acc();
}
document.addEventListener('click', handleClick);
});
}
async function main() {
for (let i=0;i<4;i++) {
console.log("waiting for a click", i);
await getClick();
console.log("click received", i);
}
console.log("done");
}
main();
在此plunkr中尝试。
答案 1 :(得分:0)
要实现:
for(var i=0;i<4;i++){
let x = prompt("Input an integer"); // WAIT FOR PROMPT
// ...
// LOOP CODE AFTER PROMPT
}
您可以使用递归:
function promptLoop(count){
let x = prompt("Input an integer");
// ...
// LOOP CODE AFTER PROMPT
if (count > 0) promptLoop(count - 1)
}
并像这样使用它:
promptLoop(4);
您的第二种情况不同,可以像这样进行调整:
function loop(count, method) {
if (count > 0) method(() => loop(count - 1, method), count);
}
您的函数随后将进行下一个回调,如下所示:
function toBeLooped(next){
// do stuff
next() // continues loop
}
loop(3, toBeLooped);