SetTimeout and SetInterval (javascript)

Recently I re-came across these two javascript methods. They’re a real neat piece to use rather than trying to track a current time and updating elements accordingly. Instead, they’re a great, simple way to create continuous updates without a window change or refresh.

The Basics

setTimeout(f, t) takes two inputs, a function and a time limit (measured in milliseconds). The function waits for the allotted time ‘t’ and executes once.

// example, run in console
// the function logExample will log 'hello there' after waiting 5 seconds

function logExample(){
   console.log('hello there!')
}

const testOne = setTimeout(logExample, 5000)

testOne

setInterval(f, t) is slightly trickier. setInterval also takes in a function and a time, just like setTimeout(), however, setInterval executes code multiple times.

// example, run in console
// the function secondExample will log 'you are a bold one!' every 5 seconds

function secondExample(){
   console.log('you are a bold one!')
}

const testTwo = setInterval(secondExample, 5000)

testTwo

Oh! But it won’t stop now! How do we clear this interval now that we started it. Come to think of it, what if we also wanted to stop setTimeout before it executed? Is it really possible to change the future after regret sets in?

Clearing setTimeout

setTimeout and setInterval are cleared in very similar ways. clearTimeout will clear the Timeout, and clearInterval will clear the Interval. There is a small catch, for clearTimeout to work, we must execute this method before the function called in setTimeout is executed.

// clearTimeout example, pt 1

function hello(){
   console.log('Hello World!')
}

function timeHello(){
   let world = setTimeout(hello, 5000)
}

timeHello()
// after five seconds it will log: 'Hello World!'

Now if we add a clearTimeout within our timeHello function.

// clearTimeout example, pt 2

function hello(){
   console.log('Hello World!')
}

function timeHello(){
   let world = setTimeout(hello, 5000)
   clearTimeout(world)
}

timeHello()
// after five seconds it still wont' have logged anything, in fact, it would appear as if nothing happened

Clearing setInterval

clearInterval can be more forgiving that clearTimeout, that it doesn’t matter if setInterval executes once, twice, or none at all. clearInterval will stop the setInterval after it has already been called.

// clearInterval example, pt 1

function hello(){
   console.log('Hello World!')
}

let world = setInterval(hello, 1000)
world

// will log 'Hello World!' once, every second.

However, if we add an clearInterval after a certain period of time (using setTimeout)

// clearInterval example, pt 2

function hello(){
   console.log('Hello World!')
}

function stopHello(){
   clearInterval(world)
}

let world = setInterval(hello, 1000)
world

setTimeout(stopHello, 5000)

// will log 'Hello World!' 5 times (in five seconds) and stop.

Conclusion

In principle these methods may seem simple, but using them isn’t always as straightforward as it may immediately seem. Mastering them is vital to the everyday programmer and can be useful in any variety of settings. Below are some links to further your understanding of these methods.

• JS Timing Events – https://www.w3schools.com/js/js_timing.asp
• Window setTimeout() method – https://www.w3schools.com/jsref/met_win_settimeout.asp
• Window setInterval() method – https://www.w3schools.com/jsref/met_win_setinterval.asp