我们可以让设置Interval等待它内部的函数被执行吗

Question

我正在尝试制作一个动画(虽然我没有给出确切的代码，但我想做的是一个例子(，就像我希望设置Interval等待它的内部函数完全执行，然后再次运行它自己一样。还有很多类似的问题，比如如何让setInterval等待函数执行？(你认为这个问题听起来和这个问题类似，但这个问题的答案并没有详细说明发生了什么(并等待setInterval((完成但这些问题并没有给我答案。有人能告诉我有可能这样做吗？(如果可能的话(那怎么办？

setInterval(()=>{
setTimeout(()=>{
console.log("hel1o")
},3000)
},1000)

Answer 1

您可以使用递归并承诺这样做。首先，将计划执行的代码包装在返回promise的函数中。然后创建一个递归函数，该函数在操作完成后调用自己。

const action = () => new Promise((resolve, reject) => {
console.log("Action init")
return setTimeout(()=>{
console.log("Action completed")
resolve();
},3000)
})
const actionRecursion = () => {
action().then(() => {
setTimeout(actionRecursion, 1000)
})
}
actionRecursion();

Answer 2

您可以定义一个函数，将要运行的函数和延迟作为参数，然后使用setTimeout将函数调度为在指定的延迟之后运行。这里有一个例子：

function setInterval(func, delay) {
let timeoutId;
function run() {
func();
timeoutId = setTimeout(run, delay);
}
timeoutId = setTimeout(run, delay);

return timeoutId;
}
function clearInterval(handle) {
clearTimeout(handle);
}

在本例中，您可以调用const handle = setInterval(myFunction, delay)在指定的delay之后运行myFunction，然后安排它在另一个delay完成后再次运行。要停止该函数的运行，可以调用clearInterval(handle)。

编辑：当您在传递给setInterval(…(的回调((中清除Interval(..(时，上面的代码不起作用。因此，这里有一个更新的版本：

function setInterval(callback, delay) {
const handle = {
id: null,
state: true,
}
function run() {
callback();
if (handle.state) handle.id  = setTimeout(run, delay);
}
handle.id = setTimeout(run, delay);
return handle;
}
function clearInterval(handle) {
if (!handle) return
clearTimeout(handle.id);
handle.state = false
}