Race Condition on run.later() with logs

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  logger: Ember.inject.service(),
  textBoxInDOM: Ember.computed(function()
  {
      let elem = document.getElementById('codeThing');
    	alert((typeof elem));
      return (typeof elem);
  }),
  displayTextBox: true,
  codeAsWeType: null,
  codeChangedContext: null,
  codeDidChange(code)
  {
	this.get('logger').log('init of codeDidChange');	Ember.run.cancel(this.get('codeChangedContext'));
    let context = Ember.run.later(this, function()
    {
      this.get('logger').log('init of callback in run.later');
      if (this.get('displayTextBox') === false) {
        alert("action for element removed from the DOM shouldn't fire?");
      }
			this.set('codeAsWeType', null);
      this.set('codeAsWeType', code);
      
      this.get('logger').log('end of callback in run.later');
    }, 800);
    
    this.codeChangedContext = context;
    this.get('logger').log('end of codeDidChanged');
  },

  actions:
  {
    codeChanged(code)
    {
      this.get('logger').log('init of codeChanged');
      this.codeDidChange(code);
      this.get('logger').log('end of codeChanged');
    },
    buttonClicked()
    {
    
    this.get('logger').log('init of buttonClicked');  this.toggleProperty('displayTextBox');
      this.get('logger').log('end of buttonClicked');
    },
    
    clearLogs() {
      this.get('logger').clear();
    }
  }
});

go-boom.template.hbs

{{yield}}

services.logger.js

import Ember from 'ember';

export default Ember.Service.extend({
  logs: Ember.A(),
  
  log(message) {
  	this.get('logs').pushObject(message);
	},
        
  clear() {
    this.set('logs', Ember.A());
  }
});

templates.application.hbs

<h1>Race condition for action on run.later()</h1>
<br>
<p>Type something in the text box below.</p>
<p>After a short delay what you type will appear below</p>
<p>Click on the button before what you type shows up.</p>
<br>

{{#if displayTextBox}}
		<input id="codeThing" value={{codeText}} oninput={{action "codeChanged" value="target.value"}}>
    <br>
{{/if}}

<p>You are typing: {{codeAsWeType}}</p>

<br>
<button {{action "buttonClicked"}}>Click to cause racing condition.</button>
<br>
<br>
<button {{action "clearLogs"}}>
  Clear logs
</button>

<ul>
  {{#each logger.logs as |log|}}
    <li>{{log}}</li>
  {{/each}}
</ul>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}