How to use setTimeout to step through a for loop line by line?

Question

I am trying to visualize a bubble sort algorithm, I am trying to figure out a way to make my for loop iterate once every 1000ms, so it steps through and I am able to draw the result of each iteration.

I have tried using setTimeout but the for loop continues to execute while the setTimeout executes asynchronously. Is there another way to just "step" through the for loop?

// bubble sort
function bubbleSort(arr) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr.length; j++) {
      if (arr[j] > arr[j + 1]) {
        let temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
        delay();
      }
    }
  }
  return arr;
}
function delay() {
  setTimeout(() => {
    console.log('hello');
  }, 1000);
}

Answer 1

You can convert your function to a generator function and yield the state of the array after each sort.

If you try to call .next().value , when the outer-loop is finished, an exception will be thrown. This is where you can catch it and cancel the interval.

 console.log('START'); let arr = [ 5, 3, 4, 2, 1 ], gen = bubbleSort(arr), wait = 1000, counter = 0; const intervalId = setInterval(() => { try { const value = gen.next().value.join(','); console.log(`Step ${++counter}: ${value}`); } catch (e) { clearInterval(intervalId); console.log('STOP'); } }, wait); function* bubbleSort(arr) { for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr.length; j++) { if (arr[j] > arr[j + 1]) { let temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; yield arr; } } } }

 .as-console-wrapper { top: 0; max-height: 100%;important; }

---

Alternatively, you can try adding a callback that starts a timeout that will return in a linear fashion.

 let arr = [ 5, 3, 4, 2, 1 ], wait = 1000; const stepFn = (step, arr) => { const finalStep = Math.pow(arr.length, 2) - 1; const result = arr.join(','); // Capture values setTimeout(() => { console.log(`Step ${step}: ${result}`); // Finally display them if (step === finalStep) { console.log('STOP'); } }, step * wait); // Asynchronous calls, but the timeout is linear }; console.log('START'); bubbleSort(arr, stepFn); function bubbleSort(arr, callback) { for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr.length; j++) { if (arr[j] > arr[j + 1]) { let temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } callback(i * arr.length + j, arr); // Insert a callback } } }

 .as-console-wrapper { top: 0; max-height: 100%;important; }