递归setTimeout中的递归setTimeout
我制作动画，它们是有时间限制的。一个跟着另一个。我需要一个完全不同的动画在一个动画的时刻开始，这与第一个动画无关，第一个动画周期等待第二个周期的结束，然后才继续工作。
我决定通过一组递归计时器来实现这一点，但问题是第一个动画周期拒绝了第二个动画周期，并且阻止了第二个周期的正确完成。也就是说，它们的工作不同步。如何让第一个周期等待第二个周期的结束？
var func = function(i){
return function(){
if (i >= 5) return;
console.log("turn no. " + i);
// running second recursion
var func2 = function(i_){
return function(){
if (i_ >= 75) return;
console.log("turn no2. " + i_);
if(i_ >= 75) {
console.log('2 Player won');
} else {
setTimeout(func2(++i), 2000);
}
}
}
setTimeout(func2(0), 2000);
// end running second recursion
if(i >= 5) {
console.log('1 Player won');
} else {
setTimeout(func(++i), 100);
}
}
}
setTimeout(func(0), 100); (提前谢谢)
期望的最终产出：
转0
转no2。0
转no2。1
转no2。2
转no2。3.
转no2。4.
转no2。5
2人获胜
转1号
转no2。0
转no2。1
转no2。2
转no2。3.
转no2。4.
转no2。5
2人获胜
转2号
转no2。0
转no2。1
转no2。2
转no2。3.
转no2。4.
转no2。5
2人获胜
转3号
转no2。0
转no2。1
转no2。2
转no2。3.
转no2。4.
转no2。5
2人获胜
转4路
转no2。0
转no2。1
转no2。2
转no2。3.
转no2。4.
转no2。5
2人获胜
转5号
转no2。0
转no2。1
转no2。2
转no2。3.
转no2。4.
转no2。5
2人获胜
1人获胜
附注：我想要的是一般的可能性吗？))
我只需要做两个有时间依赖性的相关动画
回答 1
Stack Overflow用户
发布于 2020-08-28 13:34:31
这是你期望的行为吗？为了简单和更快的测试运行，我已经更正了您实现的游戏逻辑，并将5次计数器放置在各处，而不是75次。此外，修改了函数从超时添加的参数调用的方式，该参数必须在毫秒数之后传递给您的函数。
var func = function(i){
console.log("turn no. " + i);
var func2 = function(i_){
console.log("turn no2. " + i_);
if(i_ >= 5) {
// If reach limit - end second recursion
console.log('2 Player won');
return;
} else {
// Launch new cycle in second recursion
setTimeout(func2, 500, ++i_);
}
}
// Run second recursion
setTimeout(func2, 500, 0);
if(i >= 5) {
// If reach limit - end first recursion
console.log('1 Player won');
return;
} else {
// Launch new cycle in first recursion
setTimeout(func, 3000, ++i);
}
}
// When setting timeout function you can pass arguments
// to your function after milliseconds number,
// 3rd+ parameter, like this
//
// Run first recursion
setTimeout(func, 3000, 0);
无论如何，setTimeout最终将并行运行，所以如果您的重点是创建异步代码，其中一个函数必须等待另一个函数-最好使用异步/等待和承诺，因为它们正是为此而设计的。检查下面的代码并阅读注释
// Set pause function
const timeout = (ms) => new Promise(resolve => setTimeout(resolve, ms));
// Set main async function
const main = async () => {
// Settings
let no1t = 5;
let no2t = 5;
// No1 function
let i1 = 0;
const no1 = () => {
return new Promise(async (resolve, reject) => {
console.log(`No1: ${i1}`);
// Run no 2 and wait untill it will be resolved
await no2();
// Print that cycle completed
console.log(`No1: ${i1} completed!`);
// Wait a sec
await timeout(1000);
// If cycles not finished yet, run recursion
if(i1 < no1t) {
i1++;
i2 = 0;
await no1();
}
// Resolve promise after all
resolve();
});
};
// No2 function
let i2 = 0;
const no2 = () => {
return new Promise(async (resolve, reject) => {
console.log(`-No2: ${i2}`);
// Wait
await timeout(500);
// If cycles not finished yet, run recursion
if(i2 < no2t) {
i2++;
await no2();
} else {
// Print that cycle completed
console.log(`-No2: completed!`);
}
// Resolve promise after all
resolve();
});
}
// Run no1 and wait untill it finishes
await no1();
// Log completed
console.log(`Everything completed`);
}
// Run program
main();
https://stackoverflow.com/questions/63634604
复制相似问题
腾讯云开发者
