Javascript JS-在继续之前等待其他函数完成其工作

我正在努力等待，直到在for循环中调用的函数中完成某些操作

我有几个div存储在一个数组中，我想要实现的是：

一个随机选择的div高亮显示1s

在先前选择的div停止高亮显示后，其他随机选择的div开始执行相同的操作

所以我想让它们以随机顺序突出显示

我一直在尝试互联网上的不同东西，但无法按应有的方式工作。通常循环只经过所有的div，没有等待或任何事情。它们都同时高亮显示

下面的代码是我试图实现最终目标的承诺，但我不确定这是否是正确的方法。我也尝试过使用wait/async，但可能我不知道如何正确使用它们，所以它不起作用

function startHiglightingBlocks()
    {
        sequenceDivs = [];
        var randomIndexes = shuffle(indexes);
        clickIndex = 0;
        for(var i=0; i < sequenceLength; ++i)
        {
            sequenceDivs.push(blockDivs[randomIndexes[i]]);
            highlightBlock(blockDivs.eq(randomIndexes[i]))
                    .then(
                        function (result) {
                            
                        }
                    );
        }
    }

    function highlightBlock(block)
    {
        block.addClass('highlight');
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                block.removeClass('highlight');
                block.text(i)
                resolve("Success");
            }, 1000);
        });
    }

函数startHiglightingBlocks（）
{
sequenceDivs=[]；
var randomIndexes=shuffle（索引）；
clickIndex=0；
对于（变量i=0；i

请看一下这个例子

constshuffle=（数组）=>{
const result=Array.from({
长度：array.length
});
for（设i=0；i新承诺（（解析）=>设置超时（解析，毫秒））；
常量高亮显示=异步（元素）=>{
常量序列=无序排列（元素）；
for（序列的let元素）{
element.classList.add（'highlight'）；
等待延迟（1000）；
element.classList.remove（'highlight'）；
}
};
突出显示（document.queryselectoral（'div'）），然后（（）=>console.log（'done！'））
。突出显示{
背景：红色；
}
Cat
鱼
狗
小鸟
请看一下这个例子


constshuffle=（数组）=>{
const result=Array.from({
长度：array.length
});
for（设i=0；i新承诺（（解析）=>设置超时（解析，毫秒））；
常量高亮显示=异步（元素）=>{
常量序列=无序排列（元素）；
for（序列的let元素）{
element.classList.add（'highlight'）；
等待延迟（1000）；
element.classList.remove（'highlight'）；
}
};
突出显示（document.queryselectoral（'div'）），然后（（）=>console.log（'done！'））
。突出显示{
背景：红色；
}
Cat
鱼
狗
Bird
我希望这有帮助，但这段代码没有使用async/await：


const divs=document.queryselectoral（“div”）；
//函数选择[min，max]范围内的随机数
随机函数（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min+1））+min；
}
//更改背景颜色的功能
功能突出显示（索引）{
divs[index].style.backgroundColor=“mediumseagreen”；
}
setTimeout（函数运行（）{
设randomIndex=random（0，divs.length-1）；
突出显示（随机索引）；
设置超时（（）=>{
divs[randomIndex].style.backgroundColor=“浅灰色”；
run（）；
}, 1000);
}, 1000);
div{
宽度：50%；
高度：30px；
边框：2件纯黑；
背景颜色：浅灰色；
边缘底部：10px；
}
我希望这有帮助，但这段代码没有使用async/await：


const divs=document.queryselectoral（“div”）；
//函数选择[min，max]范围内的随机数
随机函数（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min+1））+min；
}
//更改背景颜色的功能
功能突出显示（索引）{
divs[index].style.backgroundColor=“mediumseagreen”；
}
setTimeout（函数运行（）{
设randomIndex=random（0，divs.length-1）；
突出显示（随机索引）；
设置超时（（）=>{
divs[randomIndex].style.backgroundColor=“浅灰色”；
run（）；
}, 1000);
}, 1000);
div{
宽度：50%；
高度：30px；
边框：2件纯黑；
背景颜色：浅灰色；
边缘底部：10px；
}

您也可以发布您的异步/等待代码吗？虽然似乎每个人都想找到使用承诺的理由，但并不总是需要承诺。除了承诺之外，只需将回调函数作为
highlightBlock
的第二个参数传递，并在setTimeout内调用该函数。您还可以发布异步/等待代码吗？尽管似乎每个人都想找到使用承诺的理由，但并不总是需要承诺。不要承诺，只需将回调函数作为
highlightBlock
的第二个参数传递，并在setTimeout内调用该函数即可。非常感谢，我试着按照您的代码和说明进行操作，结果成功了！非常感谢，我试着按照你的代码和你的描述，我得到了它的工作！