javascript - for 循环中多次连续调用 setTimeout 无法正确重复？

Question

长话短说，我正在 chrome 开发者控制台 中工作，并且我有一个 javascript 函数(我决定调用 main 来进行说明)，它进行 4 个函数调用，但 4 个函数中的每一个函数调用调用需要间隔几秒钟，以便页面正确更新并且用户对生成的对话框使用react。

当我向内部 4 个函数调用中的每一个添加一个带有延迟的 setTimeout 并运行一次时，主函数的工作效果非常好。当我尝试循环主函数 X 次时它不起作用。

根据我从阅读其他类似问题和文档中收集到的信息，这与 setTimeout 工作方式的复杂性以及 Chrome 浏览器中的 javascript 引擎如何是单线程的......或者其他什么有关？不是我的专业知识，但我尝试尽职调查，最终我不知道如何解决问题，甚至搜索其他问答和文档我也无法找到可行的解决方案

我已经尝试使用setTimeout(,delay * i)方法和setTimeout(,delay)方法来编写下面的代码，但没有传入for循环的索引来乘以延迟，两者都无法正常工作。

其他问题建议使用嵌套的 setTimeouts，我不知道如何在这里实现这一点？其他人建议使用 setInterval，但我不确定如何以编程方式完成该次数，因为我的每个调查都有一定数量的问题，并且我不希望主函数的重复次数超过调查中问题的最大数量。

for(let i = 1; i < 15+1; i++) {
    main(i);
}


function main(i){
    setTimeout(takescreenshot, 2000*i);
    setTimeout(checkforanswers,5000*i);    
    setTimeout(takescreenshot, 8000*i);
    setTimeout(function(){$("[name=next_question_button]")[0].click();},11000*i);

}

主函数应该每次循环任意次数，在我看来，程序流程应该是:

1. 在执行 main 后延迟 2 秒后执行“takescreenshot”函数。
2. 在调用 main 后 5 秒以及在 main 中调用第一个函数后 3 秒执行“checkforanswers”函数。步骤 1-2 之间的间隙允许用户对出现的打印对话框做出响应。 3.在 main 调用后 8 秒以及上一步后 3 秒执行“takescreenshot”函数，允许页面 DOM 元素正确更新，以便新的屏幕截图反射(reflect)与第一个屏幕截图相比的更改。
3. 在调用 main 后 11 秒以及拍摄最后一个屏幕截图后 3 秒，单击“next_question”按钮前进到我的调查中的下一个问题，允许 4 个步骤在调查的新问题上重复。

当执行一次时，它完全按照我想要的方式工作，但是当循环多次时，步骤 1-4 开始发生而没有适当的延迟，并且在每个步骤中的相关“等待 X”之前开始发生满意，所有这些混合在一起，达到不可预测和不想要的结果。

Answer 1

如果i为2，则setTimeout(takescreenshot, 2000*i);将被调用2000*2 main 被调用后的毫秒数。

但是您希望在调用 main 后 11000 + 2000 毫秒调用它。其他超时也是如此。

由于 i 以 1 开头，您希望使用 11000 * (i - 1) 作为添加到每个超时函数的延迟。

function main(i){
    let delay = 11000 * (i - 1);
    setTimeout(takescreenshot, 2000 + delay );
    setTimeout(checkforanswers, 5000 + delay );    
    setTimeout(takescreenshot, 8000 + delay );
    setTimeout(function(){$("[name=next_question_button]")[0].click();}, 11000 + delay);

}