javascript - 自动将数组随机洗5次

我已经编写了JavaScript函数，以改组divs onClick数组。

  // Function to shuffle 3 divs
  shuffle = () => {
    const shuffled = this.state.divs.sort(() => Math.random() - .50);
    this.setState([...shuffled]);
  };

  // Button as an FYI
  <button onClick={this.shuffle} className="has-text-black">shuffle hats</button>

这绝对可以正常工作，并且每次单击按钮时都会随机化。

但是，我希望div在onClick上自动进行5次排序/随机排序。
(即=我不想点击5次，将5次洗牌)。

最好的方法是什么？
(我已经搜索过但没有发现任何要重复对元素进行改组的内容)。

我考虑过使用async await / settimeout，重复this.state.divs.sort(() => Math.random() - .50) 5次吗？

更新:

要添加上下文，这是一个codesandbox ...
https://codesandbox.io/s/distracted-shape-ifsiv

当我单击“随机播放”按钮时，您可以看到帽子仅互换位置一次。不是5次。

最佳答案

这是使用javascript的可行方法。
hats对象被改组5次，转换时间为500ms。

当然，这很简单，该对象是要扩展的!

let hats = [
  {content: `<h6>1🎩</h6>`},
  {content: `<h3>2🎩</h3>`},
  {content: `<h1>3🎩</h1>`},
  {content: `<h2>4🎩</h2>`},
  {content: `<h4>5🎩</h4>`}
]

function loop5(){
  let i = 0
  let timer = setInterval(function(){
    shuffle()
    if (i >= 5){
      clearInterval(timer)
    }
    i++
  }, 500)
}

function shuffle(){
   hats.sort(() => Math.random() - 0.5)
   out.innerHTML = hats.map(e => e.content).join("")
}

<button onclick="loop5()">shuffle hats</button>
<div id="out"></div>