Mercurial > qr-html
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>