diff index.html @ 2:f27dbbc6e978

Now with debounce
author nanaya <me@myconan.net>
date Sun, 15 Jan 2017 19:13:30 +0900
parents 30cd1768611b
children 6875be47fb24
line wrap: on
line diff
--- a/index.html	Sat Oct 15 16:59:59 2016 +0900
+++ b/index.html	Sun Jan 15 19:13:30 2017 +0900
@@ -64,7 +64,7 @@
             <h1>QR Code Generator</h1>
 
             <p>
-                Type something and get its QR code immediately.
+                Type something and get its QR code (almost) immediately.
             </p>
 
             <textarea class="inputbox js-qr-input" rows="4" autofocus></textarea>
@@ -81,20 +81,23 @@
 
     <script src="jquery.min.js"></script>
     <script src="qrcode.min.js"></script>
+    <script src="lodash.min.js"></script>
 
     <script>
-        var outputDom = document.getElementsByClassName("js-qr-output")[0];
-        var qr = new QRCode(outputDom);
+        var outputDom = document.getElementsByClassName("js-qr-output")[0]
+        var qr = new QRCode(outputDom)
 
-        $(".js-qr-input").on("input", function(e) {
-            var text = e.target.value;
+        var refreshCode = function(e) {
+            var text = e.target.value
 
             if (text !== "") {
-                qr.makeCode(text);
-                outputDom.classList.remove('js-hidden');
+                qr.makeCode(text)
+                outputDom.classList.remove('js-hidden')
             } else {
-                outputDom.classList.add('js-hidden');
+                outputDom.classList.add('js-hidden')
             }
-        });
+        }
+
+        $(".js-qr-input").on("input", _.debounce(refreshCode, 100))
     </script>
 </body>