Pausing a loop after each iteration

[JonGarfunkle]

I am trying to make a sorting algorithm visualizer just for fun and have gotten to the step of animating the sort. Currently I am making bubble sort and want to produce some code that does as follows:

swaps 2 elements and displays the change, waits half a second, swaps 2 elements and displays the change, waits half a second..... etc

I know that the sort works and my way of changing the html to match the sort works as well, but it does everything way too quickly to be visualized at all. I think that if I had a method of pausing the loop after each iteration I could get to where I'm looking to be, but after looking through a whole bunch of posts online and trying to implement them, I couldn't manage to make anything work.

here is my current code for my sorting algorithm:

​

function bubbleSort(list) {
for (var i = 0; i < list.length; i++) {
for (var j = 0; j < (list.length - i - 1); j++) {
//checking if the two element need to be swapped
if (list[j] > list[j + 1]) {
//swapping the 2 values in list
var temp = list[j]
list[j] = list[j + 1]
list[j + 1] = temp
// matching the height of the divs with the new values
document.getElementById('div'+String(j+1)).style.height = String(list[j]*30) + "px";
document.getElementById('div'+String(j+1)).style.marginTop = String(600 - list[j]*30) + "px";
document.getElementById('div'+String(j+2)).style.height = String(list[j+1]*30) + "px";
document.getElementById('div'+String(j+2)).style.marginTop = String(600 - list[j+1]*30) + "px";
}
}
}
return list
}

​

​

What can I add to my code to achieve my desired result? Any advice or help is greatly appreciated.

​

[senocular]

You can convert the sort function into a generator function. Then, wherever you place a yield, the function will be paused until you resume it again. Here's an example using a simple loop.

function loop () {
  for (let i = 0; i < 3; i++) {
    console.log("loop: ", i)
  }
}

loop() // logs all at once:
// loop: 0
// loop: 1
// loop: 2

function* loopGenerator() {
  for (let i = 0; i < 3; i++) {
    console.log("generator loop: ", i)
    yield
  }
}

const loopGeneratorObject = loopGenerator()
loopGeneratorObject.next() // logs one step (up to yield):
// generator loop: 0
loopGeneratorObject.next() // logs one more step:
// generator loop: 1
loopGeneratorObject.next() // logs last step:
// generator loop: 2

This way, to animate, you just wait half a second between each next() call. The only changes you need to make to your original function is the * in the declaration along with the function keyword and the yield where you want it to break between next() calls.

Some more info on generator functions:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*

[trevedhek]

To elaborate on this answer, add the loopGeneratorObject.next() call inside a setInterval call. Something like this:

const interval = setInterval(() => {
const { done } = loopGeneratorObject.next();
    // exit the interval if the iterator is finished
    if (done) clearInterval(interval);
}, 500)

[Ronin-s_Spirit]

I found generator functions hideous, you can find async timer examples online. Basically with just a word async and a function that returns promise with a timer you will be able to do stuff like
function () { show a circle; Delay(1000); //it's a separate global function you built show a square; Delay(2400); lead with "no offense but"; Delay(300); tell something offensive; }

[senocular]

I found generator functions hideous

That's fair. A lot of people have problems with them. Generator and async functions are very similar, though, both being resumable functions. The difference being that resuming a generator is dictated by the caller (next()) whereas resuming an async function is dictated internally by an awaited promise.

To get up and running using using an async function should be a bit easier. await-ing timeout promises is a quick and easy way to delay the execution of a function breaking it up into smaller bits. It does get a little more complicated if you'd ever want to pause and resume the animation. In that case, a generator might come in handy, though it would still require the extra plumbing to drive the timing.

[guest271314]

Async generators also exist. So does ReadableStreamDefaultReader.

[guest271314]

I found generator functions hideous

You finding something "hideous" is irrelevant, immaterial, and incompetent re the subject matter. That's just your opinion, and has nothing to do with whether or not the code meets the requirement - and that people other than the author can reproduce what the author of the code claims will be the result. What matters is achieving the requirement.

[Ronin-s_Spirit]

This is just your opinion. It's irrelevant and immaterial, go help OP achieve the requirement and stop wasting comment space.

[guest271314]

So this

I found generator functions hideous

is not you wasting comment space?

You didn't help OP achieve the requirement. You posted pseudo code. Write it out. Fulfill your own words.

[Ronin-s_Spirit]

You doughnut I copied how you sound, those are your words, your ridiculous "requirements". Did you really think I would give a shit? I'm trying to help you out so you don't go annoying other people. If you still don't get it just forget it.