在 for 循环中等待点击事件 - 类似于 prompt()
Wait for click event inside a for loop - similar to prompt()
这可能不是最好的标题。我试图了解回调函数,我想知道如何在不丢失 for 循环的情况下替换以下代码中的 prompt()?
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 循环的情况下完成,我更好奇回调是否能够暂停循环并等待输入?
实现:
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);
根据您的最终目标,我很确定有更好的方法。但为了做到这一点:
您可以创建一个方法,该方法 returns 承诺在发生点击时解析。然后你可以使用async
/await
做你需要的。
通过在其上使用 Promise
和 await
ing,您可以在技术上“暂停”您的 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 中尝试一下。
这可能不是最好的标题。我试图了解回调函数,我想知道如何在不丢失 for 循环的情况下替换以下代码中的 prompt()?
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 循环的情况下完成,我更好奇回调是否能够暂停循环并等待输入?
实现:
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);
根据您的最终目标,我很确定有更好的方法。但为了做到这一点:
您可以创建一个方法,该方法 returns 承诺在发生点击时解析。然后你可以使用async
/await
做你需要的。
通过在其上使用 Promise
和 await
ing,您可以在技术上“暂停”您的 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 中尝试一下。