Как я могу замедлить это для-l oop и установить состояние каждые 400 миллисекунд? - PullRequest
Новая
       22

Как я могу замедлить это для-l oop и установить состояние каждые 400 миллисекунд?

0 голосов
/ 21 февраля 2020

Я пытаюсь создать визуализатор алгоритма сортировки в React. Эта функция работает, но я хочу замедлить for-l oop, чтобы состояние устанавливалось каждые 400 миллисекунд. 

bubbleSort = (arr) => {
        console.log('bubblesort is running');
        var len = arr.length;
        console.log('array length: ', len);
        console.log(arr);

        for (var i = len-1; i>=0; i--){
                 console.log("i: ", i); 
                 for(var j = 1; j<=i; j++){
                     console.log("j: ", j);
                     if(arr[j-1]>arr[j]){
                        var temp = arr[j-1];
                        arr[j-1] = arr[j];
                        arr[j] = temp;
                        console.log("current array: ", arr);
                        this.setState({
                            array: arr
                        })
                     }
                 }
            } 
            console.log("final array: ", arr)
            return arr
     }

1 Ответ

4 голосов
/ 21 февраля 2020

Самый простой способ - использовать парадигму async / await.

Создать функцию, которая реализует задержку (возвращая обещание, которое разрешается после тайм-аута): 

const delay = (ms) => new Promise((resolve, reject) => setTimeout(resolve, ms));

Затем преобразуйте вашу функцию в async функцию: 

bubbleSort = async (arr) => {

Наконец, вставьте вызов задержки в ваш l oop: 

await delay(400);

РЕДАКТИРОВАТЬ: По комментариям, использование setTimeout означает, что функция не может вернуть результат напрямую, так как результат не будет доступен в момент выхода из функции. Если вам нужно только визуализировать сортировку, выше будет достаточно. Если вы действительно хотите отсортированный массив, вам нужно будет дождаться выполнения функции bubbleSort (или связать обещание, которое она возвращает): 

// needs to be inside `async` function
let sortedArray = await bubbleSort(array);

или 

// the result needs to be used in callback
bubbleSort(array).then(sortedArray => ... );
...