zone.js save only once

<!DOCTYPE html>
<html>

  <head>
    <script data-require="zone.js@*" data-semver="0.4.1" src="https://cdn.rawgit.com/angular/zone.js/v0.8.11/dist/zone.js"></script>
    <script data-require="zone.js@*" data-semver="0.4.1" src="https://cdn.rawgit.com/angular/zone.js/v0.8.11/dist/long-stack-trace-zone.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1>Hello Zone!</h1>
    <form name="user">
      <div>
        <label>Enter your name:</label> 
        <input name="name"> saved: <span>0</span>
      </div>
      <button type="submit" name="save">Save</button>
    </form>
    <script src="script.js"></script>
  </body>

</html>

// Code goes here



function callOncePerTask(listener) {
  const spec = new OncePerTaskSpec()
  const zone = Zone.current.fork(spec)
  
  return (...args) => {
    return zone.run(() => {
      if (!spec.hasTasks) {
        return listener(...args)
      }
    })
  }
}

class OncePerTaskSpec {
  constructor() {
    this.hasTasks = false
  }
  
  onHasTask(delegate, currentZone, targetZone, hasTask) {
    delegate.hasTask(targetZone, hasTask)
    this.hasTasks = hasTask.macroTask || hasTask.microTask
  }
}


function main() {
  const form = document.forms.user
  let i = 0
  
  form.addEventListener('submit', event => event.preventDefault(), false)
  form.addEventListener('submit', callOncePerTask(event => {
    form.name.nextElementSibling.textContent = ++i
    
    const originalText = form.save.textContent
    form.save.textContent = 'Loading...'
    
    setTimeout(() => {
      localStorage.name = form.name.value
      form.save.textContent = originalText
    }, 1500)
  }), false)
  
  setTimeout(() => console.log('opa'), 10000)
}

Zone.current.run(main)

/* Styles go here */