Question

我有一个带有图像和名称的引导表。我的数据是包含图像URL和名称的对象数组。当我单击按钮时，我希望图像对象每1秒钟随机播放一次。我正在使用Fisher-Yates算法在setInterval（）函数内部进行随机播放。

我还想知道如何创建一个停止按钮。

模拟数据：

export const data = [{
    url: 'https://via.placeholder.com/80/FF0000',
    name: 'ben'
  },
  {
    url: 'https://via.placeholder.com/80/000000',
    name: 'jon'
  },
  {
    url: 'https://via.placeholder.com/80/FFFFFF',
    name: 'sam'
  },
  {
    url: 'https://via.placeholder.com/80/0000FF',
    name: 'bill'
  },
  {
    url: 'https://via.placeholder.com/80/008000',
    name: 'tom'
  }
];

这是我的组件：

import React, { Component } from 'react';
import { Table, Button } from 'reactstrap';
import './App.css';
import { data } from './mock-data';
import { shuffle } from './helpers/shuffle';

class App extends Component {
  constructor(props){
    super(props)
     this.state = {
      images: data
     }
   }
   handleStartShuffle = () => {
     this.setState({images: setInterval(shuffle(this.state.images), 1000)});
   }

   render () {
     const imageTable = this.state.images.map((item, index) => {
       console.log('item.url', item.url)
       return (
       <tr key={index}>
         <td>
            <img src={item.url} alt='random' />
         </td>
         <td>{item.name}</td>
       </tr>
       )
     })
     return (
       <div>
         <Table>
           <thead>
              <tr>
                <th>image</th>
                <th>name</th>
              </tr>
           </thead>
           <tbody>
              {imageTable}
           </tbody>
         </Table>
         <Button onClick={this.handleStartShuffle}>Start</Button>
       </div>
     );
   }
 }
export default App;

这是我的洗牌助手功能：

export function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * i);
    const temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
  return array;
}

Answer 1

我会这样：

let interval;

handleStartShuffle = () => {
   interval = setInterval(() => {
        this.setState({images: shuffle(this.state.images)});
   }, 1000);
}

stopShuffle = () => {
   if(interval) {
       clearInterval(interval);
   }
}

Answer 2

@TShort已经showed you确切地说明了如何跟踪间隔并正确地将其停止，因此在这里我不会复制/粘贴该间隔。

但是，您的随机播放功能当前正在就地修改数组。由于阵列处于组件的状态，因此可能导致不可预测的结果。您将需要更改函数以返回 new 数组。

最简单的解决方案是在函数开始处进行复制：

export function shuffle(oldArray) {
  const array = [...oldArray];

Answer 3

setInterval返回一个计时器ID，然后您可以使用该ID调用clearInterval。您的示例有点模糊，特别是在将间隔ID存储在state.images中时。参见Using setInterval in React Component

您如何通过单击按钮每秒对图像表进行随机播放？

3 个答案: