Interviewing for Front-End Engineers

Timing: Debounce Exercise

Jem Young

Jem Young

Interviewing for Front-End Engineers

Check out a free preview of the full Interviewing for Front-End Engineers course

The "Timing: Debounce Exercise" Lesson is part of the full, Interviewing for Front-End Engineers course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to work on the Debounce exercise. Jem also gives an overview of timing in javaScript and common elements used to control it.


Transcript from the "Timing: Debounce Exercise" Lesson

>> Timing and JavaScript, this is, I try not to say which companies gave me these questions, because there's a lot of them that I've talked to. But this is a real company, it's a big one. That's not helpful at all. This is a real problem that I have solved before about timing.

But to start with timing, what do we know about how to schedule things in JavaScript? So let's say I wanted something to happen every 200 milliseconds. How would I do that in JavaScript? Let's say I wanna print hello world every 200 milliseconds in JavaScript, how would I do that?

>> setInterval.
>> setInterval, that's right. setInterval, have something happen on a loop until you cancel it. So if I say setInterval, it'll execute some function at x milliseconds. setTimeout means it'll wait whatever seconds, 500, whatever you pass in, and then it'll that function. So those are the two ways of doing timing in JavaScript.

We'll talk about request animation frame for a different sort of timing, but I didn't wanna mix that up into here. All right, so talking about timing, what is debounce?
>> It's a way to throttle things, so you don't do it too much, I guess.
>> Yeah, that's exactly right, it's a way of slowing something down.

A good way of thinking about debounce is autocomplete search. I don't want every single character that I type to be firing off requests. So if I'm typing, how do I become tall like Jem, that means as long as that sentence is, that means I'm firing off every single request, so we wanna debounce that.

So we wanna set the debounce to, say, 500 milliseconds. So that means, whenever someone stops typing, that's when the debounce is gonna fire. So let's implement debounce. I actually got this one on a phone screen not too long ago. So I'm not just making these questions up to be hard.

These are real questions that people ask. And it's a fascinating insight into someone's understanding, setting my debounce. I'll give you a hint, you're gonna need either setInterval or setTimeout. I would probably use setTimeout, but you do you.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now