我得到了带有嵌套settimeout函数的递归函数。间隔应该是这样。它们不是线性的（希望这是我需要的单词，英语不是我的母语）。我什至要在这里添加一些更多的settimeout函数。我看到解决此类问题的链接是线性进行的，如时钟倒计时等。但是我有一些不规则的间隔模式。因此，有没有更好，更复杂的方法来执行此操作...这是我的代码：
function betterBlitzColor() {
$(".playerInfoCoatTwo").animate({ backgroundColor: "transparent" }, 20);
setTimeout(function () {
$(".playerInfoCoatTwo").animate({ backgroundColor: "black" }, 20)
setTimeout(function () {
$(".playerInfoCoatTwo").animate({ backgroundColor: "transparent" }, 20)
setTimeout(function () {
$(".playerInfoCoatTwo").animate({ backgroundColor: "black" }, 20)
setTimeout(function () {
$(".playerInfoCoatTwo").animate({ backgroundColor: "transparent" }, 20)
setTimeout(function () {
$(".playerInfoCoatTwo").animate({ backgroundColor: "black" }, 20)
if(myRandomNumberBetween(1, 100) > 10)
{
setTimeout(function () {
$(".playerInfoCoatTwo").animate({ backgroundColor: "transparent" }, 20)
setTimeout(function () {
$(".playerInfoCoatTwo").animate({ backgroundColor: "black" }, 20)
if(myRandomNumberBetween(1, 100) > 10)
{
setTimeout(function () {
$(".playerInfoCoatTwo").animate({ backgroundColor: "transparent" }, 20)
setTimeout(function () {
$(".playerInfoCoatTwo").animate({ backgroundColor: "black" }, 20)
setTimeout(function () {
$(".playerInfoCoatTwo").animate({ backgroundColor: "transparent" }, 20)
setTimeout(function () {
$(".playerInfoCoatTwo").animate({ backgroundColor: "black" }, 20)
setTimeout(betterBlitzColor, myRandomNumberBetween(5000, 5000)); // inside
}, 150)
}, 100)
}, 100)
}, 400) // level 3
}
else{
setTimeout(betterBlitzColor, myRandomNumberBetween(5000, 5000)); // inside
}
}, 300)
}, 650) // level 2
}
else{
setTimeout(betterBlitzColor, myRandomNumberBetween(5000, 5000)); // inside
}
}, 50)
}, 50)
}, 150)
}, 50)
}, 300)
}
我只能说这段代码看起来很奇怪。一定有更好的方法可以做到这一点...
我访问过的链接可以解决以下问题：
Nested setTimeout alternative?
我不知道在我的情况下如何使用它。一些帮助或建议？
最佳答案
因为您的animate调用始终是相同的元素，并且集合backgroundColor是可预测的（从透明到黑色到透明，依此类推），所以所有这些功能都可以抽象为一个功能。为了方便地链接它，您可以让该函数返回一个Promise，该.then在所需的时间后解析，从而允许您使用await或await而不进行回调嵌套。另外，由于您经常连续执行许多动画（经过延迟），因此可以传递一个毫秒数的数组以在每个动画之间等待，并使用循环进行动画处理，然后Promise一个if (myRandomNumberBetween(1, 100) > 10) {可以解析经过这么多毫秒。
当长代码块和短代码块之间有交替时，可以减少缩进的其他事情是尽早返回。也就是说，与您的do something else测试一样，
if (test1) {
// many lines 1
if (test2) {
// many lines 2
// many more lines
} else {
// do something else 1
} else {
// do something else 2
}
这非常难以理解-每个连接到哪个测试？现在还不是很明显，这是一个问题。相反，您可以执行以下操作：
if (!test) {
// do something else 1
return;
}
// many lines 1
if (!test2) {
// do something else 2
return;
}
// many lines 2
将所有这些转换为原始代码的修复：
// Animation part:
let isBlack = true;
function animate() {
$(".playerInfoCoatTwo").animate({
backgroundColor: isBlack ? "transparent" : 'black'
}, 20);
isBlack = !isBlack;
}
// Delay function,
// allows for much flatter code when you can `await` a `Promise` compared to `setTimeout`:
const delay = ms => new Promise(res => setTimeout(res, ms));
async function animateAndWait(msArr) {
for (let i = 0; i < msArr.length; i++) {
animate();
await delay(msArr[i]);
}
}
async function betterBlitzColor() {
await animateAndWait([0, 300, 50, 150, 50, 50]);
if (myRandomNumberBetween(1, 100) <= 10) {
return delay(myRandomNumberBetween(9000, 18000))
.then(betterBlitzColor);
}
await animateAndWait([650, 300]);
if (myRandomNumberBetween(1, 100) <= 10) {
return delay(myRandomNumberBetween(9000, 18000))
.then(betterBlitzColor);
}
await animateAndWait([400, 100, 100, 150]);
delay(myRandomNumberBetween(9000, 18000))
.then(betterBlitzColor);
}
关于javascript - 具有不规则间隔的嵌套settimeout(更复杂的方法)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52618465/