Функция остановки во время работы в React

Question

Введение

Я создаю визуализатор алгоритмов сортировки для целей изучения, и у меня есть функция sortArray(), которая заботится о анимации сортируемого массива. Как вы можете видеть в коде.

, и он работает нормально, но проблема в том, что я хотел, чтобы сортировка массива занимала некоторое время, и я хотел, чтобы эта функция была остановлена ​​во время работы.

Что я уже пробовал

После того, как я понял, что у меня есть эта проблема, я подумал, что кнопка "Стоп" будет хорошим способом решения моей проблемы, я добавил новое состояние под названием «Прервать», и исходная идея заключалась в том, что во время работы функции sortArray() функция будет каждый раз проверять, установлено ли состояние прерывания в «истина», и если это так, функция остановится. и, конечно, это не сработало.

после этого моя предыдущая попытка не удалась, я удалил состояние «abort» из кода и преобразовал его в обычную переменную, думая, что проблема, возможно, связана с setState функция была асинхронной c, и она тоже не работала.

После этого я провел небольшое исследование, но не нашел ничего полезного.

Код:

resetArray(){
        const arrayToSort = [];
        const prevChanged = [];
        for (let i = 0; i < this.state.numberOfItems; i++) {
            arrayToSort.push(this.RandomIntBetweenRange(5, 1000));
        }
        this.setState({ arrayToSort, prevChanged, abort: false });
    }

generateNewArray(){
    this.setState({abort: true},{
        this.resetArray();
    });
}

async SortArray(algo){
    let sortedArrayAnim = algo(this.state.arrayToSort);
    let arrayToSort = this.state.arrayToSort;
    let prevChanged = this.state.prevChanged;

    for (let index = 0; index < sortedArrayAnim.length; index++) {
        const [i,j] = sortedArrayAnim[index];

        if(this.state.abort){
            console.log(abort);
            return null;
        }
            let temp = arrayToSort[i];
            arrayToSort[i] = arrayToSort[j];
            arrayToSort[j] = temp;

            prevChanged.push(i,j);

            if(index == sortedArrayAnim.length - 1){
                prevChanged.push(arrayToSort.length + 1, arrayToSort.length + 1);
                this.setState({prevChanged});
            }

            this.setState({ arrayToSort,prevChanged });
            await sleep(10);
    }
}

render() {
    const {arrayToSort} = this.state;
    return (
        <div className="main-div">
            {arrayToSort.map((value, idx) => (
                <div className="array-item" key={idx} style={{height: value, width: 800 / this.state.numberOfItems, backgroundColor: this.getColor(idx)}}>

                </div>
            ))}

            <button onClick={() => this.generateNewArray()}>Generate new array</button>
            <button onClick={() => this.SortArray(BubbleSort)}>Bubble Sort</button>
            <button onClick={() => this.SortArray(InsertionSort)}>Insertion Sort</button>
            <button onClick={() => this.SortArray(QuickSort)}>Quick Sort</button>
            <input type="number" min="5" max="1500" onChange={(event) => this.handleOnChange(event)} defaultValue={this.state.numberOfItems}/>
        </ div>
    );
}

Answer 1

Не могли бы вы сделать что-нибудь с веб-работником?

Структурируйте класс примерно так

class LongOperation extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      running: false,
      results: null,
      worker: null,
    }
  }

  startLongOp(){
     const worker = new Worker('yourIsolatedOp.js')
     //...setup
     this.setState({
       running: true,
       worker: worker,
     })
  }

  cancel() {
    if(running) { 
      this.state.worker.terminate() 
    }
    this.setState({
      running: false, 
      worker: null,
    })
  }

  render() {
   //Do your rendering
   <button onClick={e => this.startLongOp()}>Start</button>
   <button onClick={e => this.cancel()}>Cancel</button>
  }
}

//while loop:
while(this.state.running) {
  //do stuff
}

Вы также можете сделать это с некоторым временем l oop, но это будет в потоке пользовательского интерфейса. Я не пробовал это, это всего лишь эскиз от макушки головы. Теперь разработка параллельной сортировки будет более сложной задачей. Работникам будет проще всего, если вы сможете их изолировать. с веб-работником, передающим данные и т. д. c .. но вы можете легко найти его. Я не вижу причин, по которым вы не можете обновить состояние из этих сообщений.