Debounce input key press handling (#5309)

- input key handler causes 2 layout cycles on each keypress which can
clog up browser rendering when typing quickly
- this change adds a debounce to the key press handler of 500ms

Fixes #5308
Signed-off-by: David Kaltschmidt <david.kaltschmidt@gmail.com>

web/ui/static/js/graph/index.js

@@ -1,6 +1,7 @@
 var Prometheus = Prometheus || {};
 var graphTemplate;
 
+var INPUT_DEBOUNCE_WAIT = 500; // ms
 var SECOND = 1000;
 
 /**
@@ -75,7 +76,9 @@ Prometheus.Graph.prototype.initialize = function() {
       self.queryForm.submit();
       e.preventDefault();
     }
-    $(this).on('keyup input', function() { resizeTextarea(this); });
+    $(this).on('keyup input', debounce(function() {
+      resizeTextarea(this);
+    }, INPUT_DEBOUNCE_WAIT));
   });
 
   self.expr.click(function(e) {
@@ -1159,6 +1162,20 @@ const queryHistory = {
   }
 };
 
+// Defers invocation of fn for waitPeriod if returned function is called repeatedly
+function debounce(fn, waitPeriod) {
+  var timeout;
+  return function() {
+    clearTimeout(timeout);
+    var args = arguments;
+    var scope = this;
+    function invokeFn() {
+      return fn.apply(scope, args);
+    }
+    timeout = setTimeout(invokeFn, waitPeriod);
+  };
+}
+
 function escapeHTML(string) {
   var entityMap = {
     "&": "&",