- [Narrator] Our typing speed tester doesn't really have any practical purpose unless the clock stops when the test is done. And right now, that doesn't happen. It just keep running. To stop the clock, we first need to remember why the clock is running to begin with. That's happening here inside the start function. We set an interval to a thousandth of a second, and then we run the run timer function every thousandth of a second, and then we increment up and the clock is running. So to stop the clock, we need to somehow stop this interval.
The problem is, we need to do that from outside the start function and we can't because we have no way of referring to the interval to begin with, so if we try to stop it, we'll just stop some other interval that's running and nothing will work. The good news is this is relatively easy to solve, and we addressed the solution previously when we talked about functions. Let me show you what I mean. If I go up to the top here and set up a new global variable called interval, then scroll down, and put set interval inside that variable, this variable now effectively is the set interval function.
That means, if I used a clear interval function on interval, I am in fact using it on set interval and we clear this interval. Scroll up to spell check. Here we have the conditional statement that tests whether text entered in this box equals origin text in this box, and when it's true, I clear interval, interval. Now clear interval is passed down to interval, and interval is clear, and the clock stops.
Save it, and go test it in the browser. And when I hit the punctuation mark, the clock should stop. And it did. Awesome. There's only one problem: if I take all the text out, look what happens. The clock starts again. And now, I can't stop it. What's happening here is every time I make a key press, I trigger the start function. The start function says, if the text entered length is absolute equal to zero, which it is when I erase everything in this test area, then start the interval.
The problem is, we are now starting a new interval that is not the same as before. It'll have a new index number, so we can't clear it. That's a problem. But again, we can solve it with some simple logic. If I go back up to the top here, I'll create a new variable called timer running, and I'll set it to false. That means when the script originally loads, the timer is not running. That makes sense, right? Then we go down to the start function, and we say, if text entered length is absolute equal to zero, and not timer running, meaning timer running is set to false, then we set timer running to true and save the script.
So what happens now is the first time we start typing in this box, timer running is set to true, and that means even if we clear the interval, so everything stops once we're done, we still won't run this interval set interval function again because timer running is now true. That means I can now go back in again, text to test, clock stops. I can erase the text. Clock does not start again. Can you see the finish line? It's almost there. Just one more movie.
Author
Updated
4/1/2019Released
5/17/2017Through practical examples and mini-projects, this course helps you build your understanding of JavaScript piece by piece, from core principles like variables, data types, conditionals, and functions through advanced topics including loops, closures, and DOM scripting. Along the way, you will also be introduced to some ES6 and the basics of JavaScript libraries.
- What is JavaScript?
- Working with data
- Using functions and objects
- Working with JavaScript and the DOM
- Changing DOM elements
- Handling events
- Working with loops
- Making images responsive using markup
- Troubleshooting code
- Validating functionality
- Minifying JavaScript
Skill Level Beginner
Duration
Views
Related Courses
-
Introduction
-
Welcome1m 7s
-
-
1. JavaScript: An Introduction
-
What is JavaScript?2m 38s
-
-
2. The Basics
-
Introducing the browser console10m 31s
-
3. Working with data
-
Data types in JavaScript4m 2s
-
Arrays2m 20s
-
4. Functions and Objects
-
Functions in JavaScript3m 28s
-
Build a basic function3m 29s
-
Anonymous functions5m 11s
-
Variable scope3m 17s
-
ES2015: let and const6m 12s
-
Make sense of objects3m 19s
-
Object constructors6m 16s
-
Closures8m 11s
-
-
5. JavaScript and the DOM, Part 1: Changing DOM Elements
-
Access and change elements4m 33s
-
Access and change classes3m 45s
-
Access and change attributes4m 53s
-
Add DOM elements6m 56s
-
6. Project: Create an Analog Clock
-
Use CSS to move clock hands3m 49s
-
7. JavaScript and the DOM, Part 2: Events
-
What are DOM events?1m 31s
-
Some typical DOM events1m 59s
-
Add and use event listeners6m 51s
-
-
8. Project: Typing Speed Tester
-
Rundown of HTML markup2m 58s
-
Build a count-up timer5m 56s
-
Add a reset button5m 3s
-
-
9. Loops
-
Loops3m 37s
-
Looping through arrays4m 7s
-
Break and continue loops7m 9s
-
-
10. Project: Automated Responsive Images Markup
-
Project breakdown1m 55s
-
Rundown of project setup3m 26s
-
-
11. Troubleshooting, Validating, and Minifying JavaScript
-
Troubleshooting JavaScript7m 20s
-
Online script linting5m 57s
-
Automate script linting8m 24s
-
Online script minification2m 50s
-
Automate script minification2m 24s
-
12. Bonus Chapter: Ask the Instructor
-
What are arrow functions?3m 11s
-
What does the % symbol do?3m 47s
-
-
Conclusion
-
Next Steps1m 55s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Stop the timer when the test is done