Using Javascript's setInterval() and setTimeout() Function

Utility

In the world of web development, often times we need to adapt and overcome the challenges that we face. Many times we have to put up with trying to tackle something that is beyond the scope of our understanding. It can become very frustrating at times when things don't end up working the way we want them to. As new developers, figuring out the ins and outs of Vanilla JS, we can find ourselves struggling to come up with a solution. That is something I have recently experienced working on a project. The project required a reminder function. Something that can compare the current date/time to an assigned date/time. It was important that I had taken the correct approach to solving this problem. Thinking about it how it will function got me doing research. This is where I ran across the setInterval() function and the setTimeout() function. These functions have many applications. You have the ability to constantly change your background and utilize all of these cool features with the setInterval() and setTimeout() functions. I will share the way these functions can be utilized, and how I utilized the setInterval() function to suit my needs for my Reminder function in my project!

setInterval() and setTimeout()

These functions are very similar, yet very different. Both are very useful when it comes to timed events in Javascript.

• setInterval() is a time interval based code execution method that has the native ability to repeatedly run a specified script when the interval is reached. Also, setInterval() loops by default. So there is no need to loop with setInterval(). This function runs until the function clearInterval() is called, in which it breaks the loop.

function myFunction() {
  let interval = setInterval(mySecondFunction, 3000, param1, param2)
}

function mySecondFunction(param1, param2) {
  return "calls this function every 3 seconds"
}

• setTimeout() is a time based code execution method that will execute a script only one time when the interval is reached. This function will not repeat itself unless it is called inside of a loop. If put inside a loop, setTimeout() will keep running until clearTimeout() is called.

function myFunction() {
  let interval = setTimeout(mySecondFunction, 3000, param1, param2)
}

function mySecondFunction(param1, param2) {
  return "Hello!"
}

Implementing setInterval() In My Project

While working through my Reminder function, I had to figure out a way to create a function that can compare current time to assigned time. The difficult part was that,

1. I needed to create a function that checked the time to see if it matched a chosen time.
2. I needed a way to call that function all the time so that it would always be checking to see if the times matched.

The way I solved my problem was by setting up a setInterval() function that called a function every second. This function would check the current date/time and see if it matches the date/time someone set for the reminder. Although this is not efficient, if working with only Vanilla JS, this may be the only way to do it. Next, if the set date/time matched the actual date/time, I stopped the interval using clearInterval() and was able to render a pop up and an audio aspect to my reminder function.

Myinterval = setInterval(setReminder, 1000, ev, newCard);

if(actualTime == alarmTime && currentActualDate == selectedDate) {
    audio.play();
    endReminder(newCard);
  }

Conclusion

Although Javascript can be very frustrating at times, there are many methods that can serve as very helpful. The functions I went through in this blog are especially helpful if there is a desire to call a function every so often, or if you need to call a function after a certain amount of time. Either way, functions such as setInterval() and setTimeout() are what makes Javascript such a special language to work with. The more that is learned about how Javascript works, the more fun it becomes coding with it!