Hardened JS queries

notes.md

• Another module, a mediator, would call query({types:"one,two"}) to intiate a search.
• The query() method is debounced to prevent a bunch of successive calls if the person is actively using the UI. But, it has the leading and trailing attributes so that the first clicks is immediately handled and so that a final GET is made once the user is done being spastic, responding to the final search terms.
• We save the xhr response so that we can use it to abort a still running request. Thus, if the request still hasn't finished by the time the trailing execution happens, the done() callback won't be fired for the previous query.

view.js

define(function (require) {
	
	/**
	 * Lookup the categories for the insights
	 *
	 * @param {object} terms Data to be URLEncoded and passed to the server
	 */
	View.query = _.debounce(function(terms) {

		// Disable the UI (or show a spinner)
		this.$('.group, button').velocity('disable', { stagger: 50 });

		// Talk to server
		if (this.xhr) this.xhr.abort();
		this.xhr = $.get('/categories.json', { types: terms }).done(this.done);

	}, 500, { leading: true, trailing: true});
	
	/**
	 * Replace the categories with a new because of the categories type being touched
	 *
	 * @param {object} data Categories data from Types view's AJAX query
	 */
	View.done = function(data) {
		delete this.xhr;

		// If there are no categories at all, hide the whole unit
		data.length > 0 ? this.show() : this.hide();

		// Render new boxes
		this.$el.html(Mustache.render(template, { groups: data }));
		this.initBoxes();
	};
	
}