New Twiddle

components.my-component.js

import Ember from 'ember';
import Token from '../token';
import { schedule as s } from '../token';

export default Ember.Component.extend({
	init() {
    this._super();
    this.token = new Token(this.routeToken);
  },
  
  routeToken: null,
  
  schedule(job) {
    s(job, this.token);
  },
  
  click() {
    console.log('click');
    this.schedule(() => {
      this.set('foo', 'bar');
      alert('component clicked');
    });
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('my-route');
});

export default Router;

routes.my-route.js

import Ember from 'ember';
import Token from '../token';

export default Ember.Route.extend({
  token: null,
  
  model() {
    this.token = new Token();
  	return {
      token: this.token
    };
  },
  
  actions: {
    willTransition() {
      this.token.cancel();
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{#link-to 'my-route'}}My Route{{/link-to}}
{{#link-to 'index'}}Home{{/link-to}}
{{outlet}}
<br>
<br>

templates.components.my-component.hbs

<h2>Click Me!</h2>

templates.my-route.hbs

<h1>My Route!</h1>
{{my-component routeToken=model.token}}

token.js

export default class Token {
  constructor(parent) {
    this._parent = parent;
    this._cancelled = false;
  }
  
  get cancelled() {
    return this._cancelled || (this._parent && this._parent.cancelled);
  }
  
  cancel() {
  	this._cancelled = true;
  }
}

let nextTick;
let jobs = [];

export function schedule(job, parentToken) {
  if (!nextTick) {
    nextTick = setTimeout(() => {
      let currJob;
      while (currJob = jobs.pop()) {
        currJob();
      }
      nextTick = null;
    }, 3000);
  }
  
  let token = new Token(parentToken);
  let work = function() {
    if (!token.cancelled) {
      job();
    }
  }
  
  jobs.push(work);
  
  return token;
}

twiddle.json

{
  "version": "0.10.6",
  "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.9.0",
    "ember-data": "2.9.0",
    "ember-template-compiler": "2.9.0",
    "ember-testing": "2.9.0"
  },
  "addons": {}
}