v149 · scroll promise · concurrency

Concurrent Scroll Race

Click multiple destination buttons rapidly to trigger overlapping scrollTo() calls. Each returns a promise — only the last scroll wins. Earlier ones resolve with { interrupted: true }. The scoreboard captures every outcome.

1Destination A
2Destination B
3Destination C
4Destination D
5Destination E
6Destination F
Click buttons rapidly to trigger interruptions
Race #TargetResultTime
No races yet — click a destination button above.
// Each scrollTo() returns Promise<{ interrupted: boolean }>
async function raceToDestination(container, dest) {
  const result = await container.scrollTo({
    left: dest.offsetLeft,
    behavior: 'smooth',
  });
  if (result.interrupted) {
    // Lost: another scrollTo() call took over mid-scroll
    console.log('interrupted');
  } else {
    // Won: reached the destination cleanly
    console.log('done', dest.textContent);
  }
}

// Fire two in quick succession — first loses, second wins:
raceToDestination(scroller, destA); // → { interrupted: true }
raceToDestination(scroller, destF); // → { interrupted: false } ✓

see also