From: Mark Wooding <mdw@distorted.org.uk>
Date: Fri, 15 May 2020 17:00:06 +0000 (+0100)
Subject: chpwd.js: Only update DOM properties if they're actually going to change.
X-Git-Tag: 1.2.0~4
X-Git-Url: https://git.distorted.org.uk/~mdw/chopwood/commitdiff_plain/245db33989f02513293b162695fac2114141bdc0

chpwd.js: Only update DOM properties if they're actually going to change.

This might have a significant effect on the background-friendliness of
the validation machinery.  Certainly, if I open Firefox's developer
tools, I used to see the various `whinge' elements highlighted as
changing all the time, which was rather distracting if nothing else, and
probably meant that DOM change-handling machinery was being engaged in
order to do nothing of any use.

Introduce a new function `update' which changes an object property only
if its value would actually change, and use this in the `check'
function.
---

diff --git a/chpwd.js b/chpwd.js
index a271db4..f771d65 100644
--- a/chpwd.js
+++ b/chpwd.js
@@ -64,10 +64,15 @@ var FORMS = {};
  *     submitting a form with invalid data.
  */
 
+function update(obj, slot, value) {
+  /* Update an object slot only if we're gping to change its value. */
+  if (obj[slot] !== value) obj[slot] = value;
+}
+
 function check() {
   /* Check through the various forms to make sure they're filled in OK.  If
-    * not, set the `F-whinge' elements, and disable `F-submit'.
-    */
+   * not, set the `F-whinge' elements, and disable `F-submit'.
+   */
   var f, form, whinge;
 
   for (f in FORMS) {
@@ -75,10 +80,10 @@ function check() {
     we = elt(f + '-whinge');
     sb = elt(f + '-submit');
     whinge = form.check();
-    if (sb !== null) sb.disabled = (whinge !== null);
+    if (sb !== null) update(sb, 'disabled', whinge !== null);
     if (we !== null) {
-      we.textContent = whinge || 'OK';
-      we.className = whinge === null ? 'whinge' : 'whinge wrong';
+      update(we, 'textContent', whinge || 'OK');
+      update(we, 'className',  whinge === null ? 'whinge' : 'whinge wrong');
     }
   }