Last active
August 24, 2019 15:03
-
-
Save MarkTiedemann/2e46777d54ebc125e629ecbbbda57b27 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <span>for </span><span id="typer"></span> | |
| <script> | |
| var target = document.getElementById("typer"); | |
| var texts = [ | |
| ["developers", "☕"], | |
| ["beginners", "🔥"], | |
| ["unicorns", "🦄"], | |
| ["hackers", "💀"], | |
| ["everyone", "❤️"] | |
| ]; | |
| var text = "", | |
| i = 0, | |
| j = 0, | |
| forward = true, | |
| wait = false; | |
| function next() { | |
| wait = false; | |
| if (i === texts.length) i = 0; | |
| text = texts[i][0]; | |
| if (j === text.length) { | |
| forward = false; | |
| wait = true; | |
| j--; | |
| return text + " " + texts[i][1]; | |
| } | |
| if (j === -1) { | |
| forward = true; | |
| wait = true; | |
| j = 0; | |
| i++; | |
| return ""; | |
| } | |
| return text.slice(0, forward ? ++j : j--); | |
| } | |
| function delay() { | |
| return Math.floor( | |
| Math.random() * (forward ? 350 : 100) | |
| ) + (wait ? 600 : (forward ? 100 : 50)); | |
| } | |
| function type() { | |
| target.textContent = next(); | |
| setTimeout(type, delay()); | |
| } | |
| setTimeout(type, 450); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Not sure this is a case where ES6 makes sense. First of all, it's 25% more code according to bytesizematters (611B -> 843B, ignoring whitespace). And maybe that's just me, but I find it harder to read
this.varNamerather than justvarName. Also, classes, rest params, let/const, etc. have pretty good browser support (roughly 90% according to caniuse) - but, depending on the target group, you might still want to transpile them, which comes with a whole new set of issues... Don't get me wrong, I love ES6. But for a very simple example like this, I don't think it's necessarily worth it.