Визуализируйте пузырьковую сортировку

Question

Я хочу создать страницу, на которой я могу визуализировать технику пузырьковой сортировки, например, отобразить первую операцию пузырьковой сортировки в первой строке, вторую во второй строке.

Пользователь может ввести числа, а затем он видит каждые 500 мс, например, каждый шаг, который выполняет механизм сортировки

В основном это то, что я хочу отобразить:

Iteration 1: [5,3,1,4,6] → [3,5,1,4,6] → [3,1,5,4,6] → [3,1,4,5,6] → [3,1,4,5,6]
Iteration 2: [3,1,4,5,6] → [1,3,4,5,6] → [1,3,4,5,6] → [1,3,4,5,6] → [1,3,4,5,6]
Iteration 3: [1,3,4,5,6] → [1,3,4,5,6] → [1,3,4,5,6] → [1,3,4,5,6] → [1,3,4,5,6]

Мой мозг тает ^^

Answer 1

Таким образом, функция setTimeout(function, milliseconds) в JavaScript принимает в качестве первого параметра функцию, которая затем будет выполняться каждые «миллисекунды» миллисекунды.

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