How to Beat 5 Common JavaScript Interview Challenges

How to Beat 5 Common JavaScript Interview Challenges

In this article, I’m going to show how you can tackle five common coding challenges you might be asked when interviewing for a JavaScript or front-end Junior Developer position. They’re not among the hardest ones you could come across in the interview process, but the way you approach each of them could make the difference between success and failure.

In this article, I’m going to show how you can tackle five common coding challenges you might be asked when interviewing for a JavaScript or front-end Junior Developer position. They’re not among the hardest ones you could come across in the interview process, but the way you approach each of them could make the difference between success and failure.

Not all companies use the same screening process, but for the most part, expect to be asked to solve a coding challenge, either on a suitable platform or on the dreaded whiteboard.

One complaint that’s usually made against coding challenges is that they’re mostly irrelevant to the day-to-day tasks the actual job requires. Especially when it comes to front-end interview questions, sometimes it’s curious how what’s missing in the interview are just front-end-related questions on things like browser compatibility, layout methods and DOM events. While this can be true, those who favor this approach and are responsible for hiring in these companies often say something like this:

Whatever we feel about the way candidates are screened for dev jobs, at the time of writing, coding challenges are still a big part of the interview process.

Pointers on Tackling Coding Challenges for Your Tech Interview

Before diving into the challenges, let’s go through some tips about how you could approach your tech interview.

  • Put in the time to prepare. Make your priority to research, learn less familiar topics, and practice a lot. If you haven’t got a Computer Science background, make sure you get familiar with some fundamental topics related to algorithms and data structures. There are online platforms, both free and paid, that offer great ways to practice your interview skills. GeeksforGeeks, Pramp, Interviewing.io, and CodeSignal are just a few of my favorite resources.
  • Practice thinking aloud when you’re trying to come up with a solution. In fact, talking through your thought process in an interview setting is preferable to spending all the available time writing down your solution in total silence. Your words will give the interviewer a chance to help you if you’re about to take a wrong turn. It also highlights your communication skills.
  • Understand the problem before starting to code. This is important. Otherwise, you might be wasting time thinking about the wrong problem. Also, it forces you to think about questions you may ask your interviewer, like edge cases, the data type of inputs/outputs, etc.
  • Practice writing code by hand. This helps you get familiar with the whiteboard scenario. A whiteboard doesn’t provide the kind of help that your code editor provides — such as shortcuts, autocomplete, formatting, and so on. When preparing, try writing down your code on a piece of paper or on a whiteboard instead of thinking it all up in your head.
Common Coding JavaScript Challenges

It’s likely that you’ve come across one or more of the challenges I’ve listed below, either during a job interview or while practicing your JavaScript skills. What better reason is there for getting really good at solving them?

Let’s get cracking!

#1 Palindrome

A palindrome is a word, sentence or other type of character sequence which reads the same backward as forward. For example, “racecar” and “Anna” are palindromes. “Table” and “John” aren’t palindromes, because they don’t read the same from left to right and from right to left.

Understanding the challenge

The problem can be stated along the following lines: given a string, return true if the string is a palindrome and false if it isn’t. Include spaces and punctuation in deciding if the string is a palindrome. For example:

palindrome('racecar')  ===  true
palindrome('table')  ===  false


Reasoning about the challenge

This challenge revolves around the idea of reversing a string. If the reversed string is the same as the original input string, then you have a palindrome and your function should return true. Conversely, if the reversed string isn’t the same as the original input string, the latter is not a palindrome and your function is expected to return false.

Solution

Here’s one way you can solve the palindrome challenge:

const palindrome = str => {
  // turn the string to lowercase
  str = str.toLowerCase()
  // reverse input string and return the result of the
  // comparisong
  return str === str.split('').reverse().join('')
}


Start by turning your input string into lower case letters. Since you know you’re going to compare each character in this string to each corresponding character in the reversed string, having all the characters either in lower or upper case will ensure the comparison will leave out this aspect of the characters and just focus on the characters themselves.

Next, reverse the input string. You can do so by turning the string into an array using the String’s .split() method, then applying the Array’s .reverse() method and finally turning the reversed array back into a string with the Array’s .join() method. I’ve chained all these methods above so the code looks cleaner.

Finally, compare the reversed string with the original input and return the result — which will be true or false according to whether the two are exactly the same or not.

#2 FizzBuzz

This is a super popular coding challenge — the one question I couldn’t possibly leave out. Here’s how you can state the problem.

Understanding the challenge

The FizzBuzz challenge goes something like this. Write a function that does the following:

  • Put in the time to prepare. Make your priority to research, learn less familiar topics, and practice a lot. If you haven’t got a Computer Science background, make sure you get familiar with some fundamental topics related to algorithms and data structures. There are online platforms, both free and paid, that offer great ways to practice your interview skills. GeeksforGeeks, Pramp, Interviewing.io, and CodeSignal are just a few of my favorite resources.
  • Practice thinking aloud when you’re trying to come up with a solution. In fact, talking through your thought process in an interview setting is preferable to spending all the available time writing down your solution in total silence. Your words will give the interviewer a chance to help you if you’re about to take a wrong turn. It also highlights your communication skills.
  • Understand the problem before starting to code. This is important. Otherwise, you might be wasting time thinking about the wrong problem. Also, it forces you to think about questions you may ask your interviewer, like edge cases, the data type of inputs/outputs, etc.
  • Practice writing code by hand. This helps you get familiar with the whiteboard scenario. A whiteboard doesn’t provide the kind of help that your code editor provides — such as shortcuts, autocomplete, formatting, and so on. When preparing, try writing down your code on a piece of paper or on a whiteboard instead of thinking it all up in your head.

Example:

fizzBuzz(5)


Result:

// 1
// 2
// fizz
// 4
// buzz


Reasoning about the challenge

One important point about FizzBuzz relates to how you can find multiples of a number in JavaScript. You do this using the modulo or remainder operator, which looks like this: %. This operator returns the remainder after a division between two numbers. A remainder of 0 indicates that the first number is a multiple of the second number:

12 % 5 // 2 -> 12 is not a multiple of 5
12 % 3 // 0 -> 12 is multiple of 3


If you divide 12 by 5, the result is 2 with a remainder of 2. If you divide 12 by 3, the result is 4 with a remainder of 0. In the first example, 12 is not a multiple of 5, while in the second example, 12 is a multiple of 3.

With this information, cracking FizzBuzz is a matter of using the appropriate conditional logic that will lead to printing the expected output.

Solution

Here’s one solution you can try out for the FizzBuzz challenge:

const fizzBuzz = num => {
  for(let i = 1; i <= num; i++) {
    // check if the number is a multiple of 3 and 5
    if(i % 3 === 0 && i % 5 === 0) {
      console.log('fizzbuzz')
    } // check if the number is a multiple of 3
      else if(i % 3 === 0) {
      console.log('fizz')
    } // check if the number is a multiple of 5
      else if(i % 5 === 0) {
      console.log('buzz')
    } else {
      console.log(i)
    }
  }
}


The function above simply makes the required tests using conditional statements and logs out the expected output. What you need to pay attention to in this challenge is the order of the if … else statements. Start with the double condition first (&&) and end with the case where no multiples are found. This way, you’ll be able to cover all bases.

#3 Anagram

A word is an anagram of another word if both use the same letters in the same quantity, but arranged differently.

Understanding the challenge

You can state this challenge in the following terms: write a function that checks if two provided strings are anagrams of each other; letter casing shouldn’t matter. Also, consider only characters, not spaces or punctuation. For example:

anagram('finder', 'Friend')  --> true
anagram('hello', 'bye') --> false


Reasoning about the challenge

The first thing to notice is that you’ll need to compare each letter in the two input strings, not only in terms of which letters they are but also how many of each letter there are in both strings. A way of mapping this information would look something like this:

finder --> f: 1        friend --> f: 1
           i: 1                   r: 1
           n: 1                   i: 1
           d: 1                   e: 1
           e: 1                   n: 1
           r: 1                   d: 1


A suitable data structure to hold the anagram data would be a JavaScript object literal: the key is the letter character and the value is the number of times that letter is contained in the given string.

Next, pay attention to these edge cases:

  • Put in the time to prepare. Make your priority to research, learn less familiar topics, and practice a lot. If you haven’t got a Computer Science background, make sure you get familiar with some fundamental topics related to algorithms and data structures. There are online platforms, both free and paid, that offer great ways to practice your interview skills. GeeksforGeeks, Pramp, Interviewing.io, and CodeSignal are just a few of my favorite resources.
  • Practice thinking aloud when you’re trying to come up with a solution. In fact, talking through your thought process in an interview setting is preferable to spending all the available time writing down your solution in total silence. Your words will give the interviewer a chance to help you if you’re about to take a wrong turn. It also highlights your communication skills.
  • Understand the problem before starting to code. This is important. Otherwise, you might be wasting time thinking about the wrong problem. Also, it forces you to think about questions you may ask your interviewer, like edge cases, the data type of inputs/outputs, etc.
  • Practice writing code by hand. This helps you get familiar with the whiteboard scenario. A whiteboard doesn’t provide the kind of help that your code editor provides — such as shortcuts, autocomplete, formatting, and so on. When preparing, try writing down your code on a piece of paper or on a whiteboard instead of thinking it all up in your head.

Solution

Here’s how you could approach the Anagram challenge:

// helper function that builds the
// object to store the data
const buildCharObject = str => {
  const charObj = {}
  for(let char of str.replace(/[^\w]/g).toLowerCase()) {
    // if the object has already a key value pair
    // equal to the value being looped over,
    // increase the value by 1, otherwise add
    // the letter being looped over as key and 1 as its value
    charObj[char] = charObj[char] + 1 || 1
  }
  return charObj
}

// main function
const anagram = (strA, strB) => {
  // build the object that holds strA data
  const aCharObject = buildCharObject(strA)
  // build the object that holds strB data
  const bCharObject = buildCharObject(strB)

  // compare number of keys in the two objects
  // (anagrams must have the same number of letters)
  if(Object.keys(aCharObject).length !== Object.keys(bCharObject).length) {
    return false
  }
  // if both objects have the same number of keys
  // we can be sure that at least both strings
  // have the same number of characters
  // Now we can compare the two objects to see if both
  // have the same letters in the same amount
  for(let char in aCharObject) {
    if(aCharObject[char] !== bCharObject[char]) {
      return false
    }
  }
  // if both the above checks succeed,
  // you have an anagram: return true
  return true
}


Notice the use of Object.keys() in the snippet above. This method returns an array containing a given object’s property names or keys in the same order as they appear in the object. In this case, the array would look like this:

['f', 'i', 'n', 'd', 'r']


This is a handy way of getting an object’s properties without performing a cumbersome loop. In this challenge, you can use it together with the .length property to check if both strings have the same number of characters, which is an important feature of anagrams.

#4 Find the Vowels

This is probably one of the less challenging challenges (no pun intended) — in terms of difficulty — but that doesn’t detract from the fact that you could come across it during a job interview. It goes like this.

Understanding the challenge

You can state the vowels challenge as follows: write a function that takes a string as argument and returns the number of vowels contained in that string.

The vowels are “a”, “e”, “i”, “o”, “u”.

Examples:

findVowels('hello') // --> 2
findVowels('why') // --> 0


Solution

Here’s a simple iterative solution to the Vowels challenge:

const findVowels = str => {
  let count = 0
  const vowels = ['a', 'e', 'i', 'o', 'u']
  for(let char of str.toLowerCase()) {
    if(vowels.includes(char)) {
      count++
    }
  }
  return count
}


The one thing to notice here is the use of the .includes() method. This method is available both on strings and arrays. You can leverage it to determine if an array contains a certain value. It returns true if the array contains the specified value and false if it doesn’t.

There’s also a more succinct solution to this challenge, which you can set up as follows:

const findVowels = str => {
  const matched = str.match(/[aeiou]/gi)
  return matched ? matches.length : 0
}


The solution above revolves around the String’s .match() method. Its use in conjunction with a regular expression enables you to perform powerful searches. If the pattern of the regular expression you pass as argument to this method is found inside the specified string, the return value will be an array of the matched characters. In case no matches are found, .match() will return null.

#5 Fibonacci

This article couldn’t be complete without a discussion of the Fibonacci challenge, a classic question you’ll surely come across during a job interview or coding practice.

A Fibonacci sequence is an ordering of numbers where each number is the sum of the preceding two. For example, the first ten numbers of the Fibonacci sequence are: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.

Understanding the challenge

The Fibonacci challenge goes something like this: write a function that returns the nth entry in the Fibonacci sequence, where n is a number you pass in as argument to the function.

Example:

fibonacci(3)  // --> 2


Reasoning about the challenge

The Fibonacci challenge involves iterating over the number of times indicated by the function’s argument and returning the entry in the Fibonacci series that you find in that position.

This way of stating the challenge immediately points to an iterative approach to solve the problem. Alternatively, you could try out a recursive solution, which would certainly impress the interviewer.

Solution

Here’s what the iterative solution might look like:

const fibonacci = num => {
  // store the Fibonacci sequence you're going
  // to generate inside an array and
  // initialize the array with the first two
  // numbers of the sequence
  const result = [0, 1]

  for(let i = 2; i <= num; i++) {
    // push the sum of the two numbers
    // preceding the position of i in the result array
    // at the end of the result array
    const prevNum1 = result[i - 1]
    const prevNum2 = result[i - 2]
    result.push(prevNum1 + prevNum2)
  }
  // return the last value in the result array
  return result[num]
}


The reason why the result array above already contains the first two numbers in the series is because each entry in the Fibonacci series is made of the sum of the two preceding numbers. At the very beginning of the series there are no two numbers that you can add to produce the next number, so your loop could not possibly generate them automatically. However, you know the first two numbers are always 0 and 1, so you manually initialize your result array with those two numbers.

Let’s move on to the recursive approach:

const fibonacci = num => {
  // if num is either 0 or 1 return num
  if(num < 2) {
    return num
  }
  // recursion here
  return fibonacci(num - 1) + fibonacci(num - 2)
}


You keep calling fibonacci() adding up smaller and smaller numbers as arguments until you hit the base case at the top where the argument passed in is either 0 or 1.

Conclusion

If you’ve just gone through a few rounds of job interviews for a front-end or JavaScript developer role, especially at the junior level, you’re likely to have come across at least one or two of the questions I listed above. Even if you haven’t, you can use all of them to practice your JS coding skills.

Can you come up with alternative ways of solving the challenges? Let’s hear them!

Top 50 Interview Questions for JavaScript Developer

Top 50 Interview Questions for JavaScript Developer

In this article, you'll see top 50 questions you should know before going to a JavaScript Developer job interview

Developer interviews are like the wild west. Nobody really knows what they’re doing. Most tech recruiters can’t distinguish between Java and JavaScript (thumbs up if you can). Yet somehow they’re tasked to recruit developers.

From time to time, we even get asked for eight years of Swift experience. Considering the Swift language is three years old, don’t let this stop you from applying.

Developer jobs are fun, challenging, and fulfilling. Getting past the interview can be as easy as flying through the door, or can be overly obnoxious to hellish whiteboard challenges. You never know what to expect.

Luckily, we as developers can prepare for all the technical parts and be sure to at least ace those. We never know what silly questions to expect, but at least we can be confident in our technical answers.

Most (modern) companies are waking up to the realization the developer interview process is broken and needs fixing. These are the companies we want to work for.

Without further ado, I gathered 100 questions that I think you should be able to answer before walking to a front-end developer interview.

General questions are questions to get to know you, how you react, think, and how well you fit in the team.

Keep your answers to these questions relatively short and concise, since they don’t carry that much weight.

Don’t trip over your words; take long pauses to think thoroughly about the questions. The questions are meant to “crack” you open so they can taste the yolk.

  1. What excites or interests you about coding?
  2. What did you learn yesterday/this week?
  3. Talk about your preferred development environment. Which Operating System, IDE, and Terminal do you use and why those in particular?
  4. If you could master one technology this year, what would it be? How would you go about mastering that skill?
  5. How did you handle the last disagreement with your direct boss? How did it resolve? Would you give me your boss’s number to check their side of the story? [The last question is a bluff, but be sure to not flinch. No one has the time to call your previous boss.]
  6. What resources, forums, or tools do you use to learn about the latest front end development and design trends? Any favorites and why?
  7. If you joined on a project and they [the dev team] used tabs and you used spaces, what would you do? Would you try to convince the team to use spaces or would you join the herd and use tabs?

[Trick question] — The most correct answer would be to use a standard format tool like Prettier, so everyone's code will look the same when it’s pushed to the repository. This way you can keep using spaces, and the team is free to use tabs.

If you force your opinion on the dev team, you wouldn’t be considered a team player, and if you used tabs without your full consent and reasoning, you wouldn’t be as motivated as everyone else and are more likely to quit.

8. Can you describe your workflow when you create a web page? What are the first five steps you take when creating a new project?

9. What is a recent technical challenge you experienced and how did you solve it?

10. What actions have you taken on recent projects to increase the maintainability of the code? Any particular programming paradigms you like such as functional programming or test-driven development?

Now that we’re past the general questions and chit-chat, it’s time for the showdown. This where the interview will start shooting technical questions at you.

Note: The questions are more focused toward front-end development but may include back-end, dev ops and problem-solving questions too.

11. Which version control systems are you familiar with? How do you share code between projects in a lossless way?

12. Name four ways to decrease page load.

13. What does CORS stand for and what issue does it address?

14. Explain what ARIA and screenreaders are, and how to make a website accessible.

15. What does a doctype do?

16. What are the building blocks of HTML5?

17. Describe the difference between localStorage, cookies, and sessionStorage.

18. What are data- attributes good for?

19. What kind of things must you be wary of when designing or developing for multilingual sites? How do you serve a page with content in multiple languages?

20. What is progressive rendering?

21. Explain how this works in JavaScript. How does this work in classes versus functions?

22. Describe event bubbling and event capturing.

23. Explain variable hoisting.

24. Explain the difference between:

  • function Animal() {}
  • var animal = Animal()
  • var animal = new Animal()

25. What’s the difference between host objects and native objects?

26. What’s a typical use case for anonymous functions?

27. Explain how JavaScript prototypal inheritance works.

28. What is a closure, and how/why would you use one?

29. What’s the difference between null and undefined?

30. What is the difference between == and ===?

31. What is Webpack? What problems does it solve?

32. Have you ever used a front-end framework or library? Which one?

33. Why is it called a Ternary operator; what does the word Ternary indicate?

34. What tools and techniques do you use debugging JavaScript code?

35. How do you debug JavaScript code that runs on the server, e.g. NodeJs?

36. What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?

37. Given this code, how would you implement the duplicate function?

// make this work

duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]

38. Can you give an example of a curry function and why this syntax offers an advantage?

39. Can you give an example of destructuring an object or an array?

40. Who invented JavaScript and why is it called JavaScript?

41. What is the difference between these two functions?

// What's the difference?

const sayHello = name => console.log(name)

function sayHello(name) {
console.log(${name})
}

42. Why and when might you want to create static class members?

43. What are the differences between variables created using let, var or const?

44. What happens when you go to a website? What’s a DNS?

45. What is the V8 Engine? Who uses it?

46. What does $ in JavaScript code refer to?

47. Explain the difference between layout, painting, and compositing.

48. What are some ways you may improve your website’s scrolling performance?

49. What is the output of the following code?

let fs = require('fs');

console.log('1');

fs.readFile('test.txt', 'utf8', function(error, data) {
if (error) {
throw error;
}

console.log('2');

});

console.log('3');

50. What is the event loop in JavaScript and what does it do?

If you knew the answers to most questions, well done!

Thanks for reading

If you liked this post, please do share/like it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading about JavaScript

The Complete JavaScript Course 2019: Build Real Projects!

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

50+ Java Interview Questions for Programmers

Top 100 Python Interview Questions and Answers

Top 100 Python Interview Questions and Answers

Best 50 React Interview Questions and Answers in 2019

Top 50+ SQL Interview Questions and Answers in 2019

Best 50 Nodejs interview questions from Beginners to Advanced in 2019

100+ Java Interview Questions and Answers In 2019

Best 50 React Interview Questions for Frontend Developers in 2019

Best 50 Angular Interview Questions for Frontend Developers in 2019

JavaScript | A Tricky JavaScript Interview Question

JavaScript | A Tricky JavaScript Interview Question

In this tutorial we are going to look at a JavaScript problem that is sometimes used to weed out JS developers during a JavaScript interview. This problem shows the interplay of scope and closure.

In this tutorial we are going to look at a JavaScript problem that is sometimes used to weed out JS developers during a JavaScript interview. This problem shows the interplay of scope and closure.

3 JavaScript questions to watch out for during coding interviews

3 JavaScript questions to watch out for during coding interviews

This article isn’t about the newest JavaScript libraries, common development practices. Rather, it’s about 3 things that usually come up in interviews when discussing JavaScript. I myself have been asked these questions, my friends have told me they’ve been asked them, too

JavaScript is the official language of all modern web browsers. As such, JavaScript questions come up in all sorts of developer interviews.

Of course these aren’t the only 3 things you should study before a JavaScript interview — there are a multitude of ways you can better prepare for an upcoming interview — but below are 3 questions an interviewer may ask to judge how well you know and understand the JavaScript language and the DOM.

So let’s get started! Note that we’re going to use vanilla JavaScript in the examples below, since your interviewer will usually want to see how well you understand JavaScript and the DOM without the help of libraries like jQuery.

Question #1: Event delegation

When building an application, sometimes you’ll need to attach event listeners to buttons, text, or images on the page in order to perform some action when the user interacts with the element.

If we take a simple todo list as an example, the interviewer may tell you that they want an action to occur when a user clicks one of the list items. And they want you to implement this functionality in JavaScript assuming the following HTML code:

You may want to do something like the following to attach event listeners to the elements:

While this does technically work, the problem is that you’re attaching an event listener to every single item individually. This is fine for 4 elements, but what if someone adds 10,000 items (they may have a lot of things to do) to their todo list? Then your function will create 10,000 separate event listeners and attach each of them to the DOM. This isn’t very efficient.

In an interview it would be best to first ask the interviewer what the maximum number of elements the user can enter is. If it can never be more than 10, for example, then the above code would work fine. But if there’s no limit to the number of items the user can enter, then you’d want to use a more efficient solution.

If your application could end up with hundreds of event listeners, the more efficient solution would be to actually attach one event listener to the whole container, and then be able to access each item when it’s actually clicked. This is called event delegation, and it’s much more efficient than attaching separate event handlers.

Here’s the code for event delegation:

Question #2: Using a closure within a loop

Closures are sometimes brought up in an interview so that the interviewer can gauge how familiar you are with the language, and whether you know when to implement a closure.

A closure is basically when an inner function has access to variables outside of its scope. Closures can be used for things like implementing privacy and creating function factories. A common interview question regarding the use of closures is something like this:

Write a function that will loop through a list of integers and print the index of each element after a 3 second delay.

A common (incorrect) implementation I’ve seen for this problem looks something like this:

If you run this you’ll see that you actually get the 4 printed out every time instead of the expected 0, 1, 2, 3 after a 3 second delay.

To correctly identify why this is happening it would be useful to have an understanding of why this happens in JavaScript, which is exactly what the interviewer is trying to test.

The reason for this is because the setTimeout function creates a function (the closure) that has access to its outer scope, which is the loop that contains the index i. After 3 seconds go by, the function is executed and it prints out the value of i, which at the end of the loop is at 4 because it cycles through 0, 1, 2, 3, 4 and the loop finally stops at 4.

There are actually a few ways of correctly writing the function for this problem. Here are two of them:

Question #3: Debouncing

There are some browser events that can fire many times within a short timespan very quickly, such as resizing a window or scrolling down a page. If you attach an event listener to the window scroll event for example, and the user continuously scrolls down the page very quickly, your event may fire thousands of times within the span of 3 seconds. This can cause some serious performance issues.

If you’re discussing building an application in an interview, and events like scrolling, window resizing, or key pressing come up, make sure to mention debouncing and/or throttling as a way to improve page speed and performance.

Debouncing is one way to solve this issue by limiting the time that needs to pass by until a function is called again. A correct implementation of debouncing would therefore group several function calls into one and execute it only once after some time has elapsed. Here’s an implementation in plain JavaScript that makes use of topics such as scope, closures, this, and timing events:

This function — when wrapped around an event — will execute only after a certain amount of time has elapsed.

You would use this function like so:

Throttling is another technique that’s is similar to debouncing, except that instead of waiting for some time to pass by before calling a function, throttling just spreads the function calls across a longer time interval. So if an event occurs 10 times within 100 milliseconds, throttling could spread out each of the function calls to be executed once every 2 seconds instead of all firing within 100 milliseconds.