Third Argument in JavaScript SetTimeOut Method and Practical Example in Your Next Project
Tags: javascript, codenewbie, beginners, programming
Published: 2021-08-04 14:28:47



**What is setTimeOut?**
SetTimeOut is a global or window method which executes a function taken as an argument once the timer expires.

>syntax

![timer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ko0vlvpvkacwf83sjbl1.png)

>**Parameters**
 *function*  can be defined within the  method or passed by value to the method.
*timer* is the delay expected before the function is executed. It's usually in `milliseconds`. This parameter is optional as a value of `0` is set by default which makes the function executes immediately.

More often in our use of the method, we tend to use only two parameters(function and timer). This article will shed more lights on the use of third arguments and so on.

>**Example**
Let's compare the common way of using `setTimeOut` without the third argument
>syntax

![Greetings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htwjy6ag0zonbvmwjtu4.png)

**Let's see how we can implement the same using third argument**
>syntax

![Third Argument](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0yet6sncfiqmvphiy7ut.png)

From the second code, we can see that third and other numbers of arguments is use as argument in the reference function given to the `setTimeOut` method. In short these arguments are carried forward to the reference function.

**Also array can be passed as an argument**.

> syntax

![ArrayOfNumbers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vrlnxp91x8coj6e42gro.png)

Also an object could be passed as argument. `Try that!!`

 **Application in search box**
Would you like to animate or spin your search icon pending a request is fulfilled or for some delay. using `setTimeOut` with third argument will get it done, let's get started

* 1. we add our form tag, input box and search icons( `fontawesome icons`).

>syntax

![HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q4ughx5to430chzfk3j7.png)

* 2. We add some `css` stylings to make the page looks nicer or you can style to suit your taste.

>syntax

![CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x2szopu7ugya0e6nmr8w.png)

* 3. Our search box looks like this adding the `css` stylings.

>syntax

![searchBoxStyling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c20fad8at32kz2wcnhvb.PNG)   

*Lets add some functionalities*

* 4. lets create an `helper` function that returns an element.

>syntax

![helperFunction](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ljtn4td9fr31jgqc7c94.png)

* 5. Using the above `helper` function, we can get our `search-icon`, `searchBtn`  elements below:

>image

![searchIcon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9cs9roum6b8td8odj5p.png)

* 6.  We add an `eventListener` to `searchBtn` `button` such that when click we want it to perform some operations:

>syntax

![search Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/au7u03e9sbd6epimx9of.png)

>syntax

![Animate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksw21clmngaob9c7ubsm.png)

* 7. Defining the `animate` function, We want the search icon `fa-search` to be hidden and spinner `fa-spinner` to animate for 3s when the `searchBtn` is clicked. To execute that, we define our animate function  below:

>syntax

![Animate 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qi5a2bwb8jogc9796kyr.png)
 
 * 8. In passing `searchIcon` as the third arguments, the setTimeOut method is aware of the icon to restore after the `fa-spinner` finished animating after 3s.


**Thanks for reading**
Do you wish to get notified when I published a new article? click [here](https://mailchi.mp/4f641d33a5ee/subscribe-ti-my)

[ISIAKA ABDULAHI](https://abdulahi.netlify.app)