From 22b8b212e574c69d641cda43beac7aa59a7af052 Mon Sep 17 00:00:00 2001
From: Edward Betts <edward@4angle.com>
Date: Wed, 25 Sep 2019 14:38:52 +0100
Subject: [PATCH] Add timer to reduce fetch.

---
 static/js/app.js | 70 ++++++++++++++++++++++++++++--------------------
 1 file changed, 41 insertions(+), 29 deletions(-)

diff --git a/static/js/app.js b/static/js/app.js
index 0585498..2466f6c 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -1,33 +1,45 @@
+var typingTimer;
+var doneTypingInterval = 500;
+
 var app = new Vue({
-  el: '#app',
-  data: {
-    searchTerms: '',
-    hits: [],
-    new_depicts: [],
-  },
-  methods: {
-    remove(index) {
-        this.$delete(this.new_depicts, index);
+    el: '#app',
+    data: {
+        prevTerms: '',
+        searchTerms: '',
+        hits: [],
+        new_depicts: [],
     },
-    add_depicts(hit) {
-      this.new_depicts.push(hit);
-      this.hits = [];
-      this.searchTerms = '';
+    methods: {
+        remove(index) {
+                this.$delete(this.new_depicts, index);
+        },
+        add_depicts(hit) {
+            this.new_depicts.push(hit);
+            this.hits = [];
+            this.searchTerms = '';
+        },
+        run_search() {
+            var terms = this.searchTerms;
+            if (terms == this.prevTerms) {
+                return;  // no change
+            }
+            this.prevTerms = terms;
+            if (terms.length < 3) {
+                this.hits = [];
+                return;
+            }
+
+            var vm = this;
+
+            fetch(lookup_url + '?terms=' + encodeURI(terms))
+                .then((res) => res.json())
+                .then((data) => {
+                    vm.hits = data.hits;
+                })
+        },
+        search(event) {
+            clearTimeout(typingTimer);
+            typingTimer = setTimeout(this.run_search, doneTypingInterval);
+        }
     },
-    search(event) {
-      var terms = this.searchTerms;
-      if (terms.length < 3) {
-        this.hits = [];
-        return;
-      }
-
-      var vm = this;
-
-      fetch(lookup_url + '?terms=' + encodeURI(terms))
-        .then((res) => res.json())
-        .then((data) => {
-          vm.hits = data.hits;
-        })
-    }
-  },
 });