Switch to throttle instead of debounce

debounce waits for a lull in activity, whereas throttle will simply
coalesce multiple calls into "one" per time period.

This may result in more requests, but it will also result in data being
saved even when the user is actively entering it.

Author: alindeman

app/assets/javascripts/drafts.js

@@ -1,6 +1,15 @@
 $(function() {
+  // The main function that serializes the form and sends it to the save draft endpoint.
+  //
+  // It is wrapped in _.throttle so it is called on the trailing edge at most
+  // once in a 3 second window. More casually this means no matter how many
+  // times the function is called within a 3 second window, the code will only
+  // actually be executed once at the end of the window.
+  //
+  // The draft is therefore saved periodically and after things have "settled,"
+  // but not so often as to flood the server with requests.
   var currentDraftRequest;
-  const saveDraftDebounced = _.debounce(function(e) {
+  const saveDraftThrottled = _.throttle(function(e) {
     let $target = $(e.target);
     let $form = $target.closest("form");
     let draftsURL = $form.data("drafts-url");
@@ -36,21 +45,17 @@ $(function() {
 
         $form.trigger("draft:error", [jqXHR, textStatus, errorThrown]);
 
-        // Retry. Rely on debounce to coalesce multiple calls into one retry.
-        saveDraftDebounced(e);
+        // Retry. Rely on throttle to coalesce multiple calls into one retry.
+        saveDraftThrottled(e);
       },
     });
-  }, 2500);
+  }, 3000, { leading: false });
 
+  // Save drafts for forms where data-drafts-url is present as an attribute.
   const $formsWithDraftsURLs = $("form[data-drafts-url]");
-  $formsWithDraftsURLs.on("blur change", ":input", saveDraftDebounced)
-
-  // After the draft is discarded, reload the page to empty out all fields and
-  // start from scratch cleanly.
-  $("a.discard-draft-link").on("ajax:complete", function(e) {
-    location.reload(true);
-  });
+  $formsWithDraftsURLs.on("blur change", ":input", saveDraftThrottled)
 
+  // Trigger validation and cursor restoration for draft-enabled forms
   $formsWithDraftsURLs.each(function() {
     const $form = $(this);
     if ($form.data("draft-restored")) {
@@ -60,4 +65,10 @@ $(function() {
       $("#" + $form.data("draft-focused-dom-id")).focus();
     }
   });
+
+  // After the draft is discarded, reload the page to empty out all fields and
+  // start from scratch cleanly.
+  $("a.discard-draft-link").on("ajax:complete", function(e) {
+    location.reload(true);
+  });
 });