Promise races

promise-races-third.js

const $page = document.getElementById('page')
let currentPage = 0

const setPage = title => {
  $page.innerText = title
}

const loadPage = (title, time) =>
  new Promise(resolve => 
    setTimeout(() => resolve(title), time)
  )

const pageChanged = () =>
  new Promise((_, reject) => {
    const thisPage = currentPage
    
    const interval = setInterval(() => {
      if (thisPage !== currentPage) {
        reject(interval)
      }
    }, 100)
  })
  .catch(interval => {
    throw 'Loading stopped, route changed'
  })
  
const onClickChangePage = button =>
  button.addEventListener('click', () => {
    const nextPage = button.getAttribute('data-page')
    const delay = +button.getAttribute('data-delay')
    
    currentPage++
    
    Promise.race([
      loadPage(nextPage, delay),
      pageChanged()
    ])
      .then(setPage)
  })

Array.from(document.getElementsByTagName('button'))
  .map(onClickChangePage)