Как замедлить цикл JS?

Question

[Stas Karter]

Мне нужно написать сортировку пузырьком, но сделать так что бы это было плавно, а не в один момент происходило. Для этого, как мне кажется, нужно замедлить циклы, но как это сделать ума не приложу, хотя если есть варианты без замедления цикла, буду рад услышать!

Answer 1

[Котик Антон]

Примеры:
codepen.io/LeonGr/pen/hyvfA
codepen.io/Rad1calDreamer/pen/vOJgRd
codepen.io/mbielanczuk/pen/votiD

Код придётся, скорее всего переписать, потому что в JavaScript нельзя просто написать что-то вроде:

for (var i = 0; i < n; i++) {
    sleep(1000);
}

Вместо цикла придётся рекурсивно вызывать функцию через заданные промежутки:

function sort (i, j) {
    // ...
    setTimeout(function(){
        sort(i + 1, j + 1);
    }, 1000);
}

Answer 2

[Алексей Струков]

попробуй выполнить цикл через setTimeout()

Answer 3

[Walt Disney]

Странная задача, но тем не менее, замедляться в JS можно только через setTimeout

Comments

[Stas Karter]

Пробовал, не понимаю, как применить это относительно цикла

[Walt Disney]

рекурсией, типа такого:

function my(array){
//одна итерация вашей сортировки
setTimeout(my,100,array)
}
my()

[Walt Disney]

в последней строчку забыл передать сам массив my(array)

Answer 4

[Виталий Артемьев]

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

function* foo(){
  var index = 0;
  while(index <= 2)
    yield index++; // yield будет прерывать работу функции на этом месте
}

Вот так это вызывается

var iterator = foo();
console.log(iterator.next()); // { index:0 }
console.log(iterator.next()); // { index:1 }
console.log(iterator.next()); // { index:2 }

То есть при вызове iterator.next() функция продолжает работать с того места где остановилась.
А вызывать iterator.next() будешь с помощью setTimeout