时间戳

首页 > 解决方案 > 自动随机播放数组 5 次

javascript - 自动随机播放数组 5 次

问题描述

我已经编写了 JavaScript 函数，以随机播放一组 div 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 自动排序/随机播放 5 次，onClick。
（IE = 我不想点击 5 次，洗牌 5 次）。

这样做的最佳方法是什么？
（我已经搜索过，但没有找到任何可以重复对元素进行改组的内容）。

我想过使用异步等待/设置超时，重复this.state.divs.sort(() => Math.random() - .50)5次？

更新：

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

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

标签： javascriptarraysshuffle

解决方案

这是使用javascript的一种可行方法。

hats对象被洗牌 5 次，第二次转换时间为 200 毫秒。

当然很简单，对象是用来扩展的！

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

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

function shuffle(){
   hats.sort(() => Math.random() - 0.5)
   out.innerHTML = hats.map(e => e.content).join("")
}
div {display: flex; font-size: xx-large }
<button onclick="loop5()">shuffle hats</button>
<div id="out"></div>

推荐阅读