Add debounce to search

This makes the UI feel far less laggy while typing in a search query.
It avoids applying redundant searches, which can easily add up to ~150ms
per character on an older device or mobile phone.

Author: SevereOverfl0w

js/main.js

@@ -3,8 +3,23 @@ $('#project-list').
     css({visibility: 'visible'});
 $('footer').css({visibility: 'visible'});
 
-$('#search-query').on('change keyup paste input', function(event) {
-    var query    = $.trim(event.target.value.toLowerCase());
+function debounce(f, wait){
+  var timeout;
+
+  return function executedFunction() {
+    var args = arguments;
+    var that = this;
+    var later = function(){
+      clearTimeout(timeout);
+      f.apply(that, args);
+    };
+
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+};
+
+function applySearch(query){
     var projects = $('#project-list li');
     if (query == '') {
         projects.show();
@@ -13,6 +28,13 @@ $('#search-query').on('change keyup paste input', function(event) {
     }
     $('#project-list .category').show().not(':has(li:visible)').hide();
     $('#project-list').masonry('layout');
+}
+
+var debouncedSearch = debounce(applySearch, 100);
+
+$('#search-query').on('change keyup paste input', function(event) {
+    var query = $.trim(event.target.value.toLowerCase());
+    debouncedSearch(query)
 });
 
 $('#search-query').focus().change();