Infinite loops and how to escape them

Understanding Infinite loops and how to escape them

An infinite loop is not a slow loop. It is a loop whose exit test can never become false given what the body does, so the useful question is never "how long will this take" but "which value does the condition read, and what in the body moves it". `while (queue.length > 0)` reads a length; if the body only peeks at `queue[0]` and never removes anything, the length is frozen and the loop is already infinite on its first pass. `while (true)` is not the dangerous shape here: a loop with a reachable `break` always has a way out, while a loop with a plausible-looking condition may have none.

Once a runaway loop starts, nothing inside the page can stop it, because JavaScript finishes the job it is running before it takes the next one from the queue. Your click handler, your `setTimeout` callback and the browser's next repaint are all queued behind the loop, which is why the tab goes unresponsive and why output you expected to watch scroll by may never appear. The escape has to come from outside that thread: Chrome's "Page unresponsive" dialog, closing the tab, the DevTools pause button (which can usually interrupt the loop and show the offending line), or Ctrl+C for a Node script. A loop whose body `await`s something does hand the thread back between passes and keeps the page alive, but it is still never going to finish.

Because you cannot reliably interrupt a runaway loop from the inside, the practical defence is to make the failure loud instead of silent. Keep a pass counter and `throw` when it crosses a ceiling far above any legitimate run, and put the state the condition depends on into the message. You then get an error, a line number and a snapshot of what the loop believed, instead of a frozen tab and no information at all. Reach for this on loops whose exit depends on data you do not control — queues, parsers, retry loops, linked structures that might contain a cycle — and treat a trip as a bug to fix, never as the normal way the loop ends.

function drainQueue(queue) {
  const done = [];
  let passes = 0;

  while (queue.length > 0) {
    if (++passes > 1000) {
      throw new Error(
        `runaway loop: ${queue.length} still queued after ${passes - 1} passes`
      );
    }
    done.push(queue[0]); // bug: reads the first job but never removes it
  }

  return done;
}

try {
  drainQueue(['render', 'save']);
} catch (err) {
  console.log(err.message);
  console.log('guarded, so the bug is an error instead of a frozen tab');
}

function drainFixed(queue) {
  const done = [];
  while (queue.length > 0) {
    done.push(queue.shift()); // the value the condition reads now shrinks
  }
  return done;
}

console.log(drainFixed(['render', 'save']).join(', '));

Worked examples

let x = 0;
let steps = 0;

// the steps guard is the only reason this terminates
while (x !== 1 && steps < 15) {
  x += 0.1;
  steps++;
}
console.log('guard stopped it:', steps === 15, '| x =', x);

let last = 0;
for (let tenths = 1; tenths <= 10; tenths++) {
  last = tenths / 10;
}
console.log('integer counting hits 1 exactly:', last === 1);

let ticked = false;
setTimeout(() => {
  ticked = true;
  console.log('timer callback ran (after the loop returned)');
}, 0);

const start = Date.now();
while (Date.now() - start < 300) {
  // stand-in for a runaway loop: it holds the thread
}

console.log('loop is done. did the 0 ms timer get a turn?', ticked);

const items = ['a', 'b'];
let iterations = 0;

for (let i = 0; i < items.length; i++) {
  if (++iterations > 5) {
    console.log('aborting: length is now', items.length);
    break;
  }
  items.push(items[i].toUpperCase());
}

console.log(items.join(','), 'after', iterations, 'iterations');

Important notes

Common mistakes

Try it yourself