Real time example with settimeout function

Hi everyone in this post I am going discuss one of the very necessary functions in JavaScript. Most of us use this function for repeated work. In this post I am discussion about how to use it more complex way.
We have two great functions setTimeout and setInterval in javascript. Both are basically same but the serinterval() method repeats the function at interval.

The basic structure:

setTimeout(function, milliseconds);
setInterval(function, milliseconds);

Some time we also use like: Var settimeout = setTimeout(function, milliseconds); Var setinterval = setInterval(function, milliseconds);
Now in this function we have 2 arguments function and the milliseconds. Firestone hold the function name and second one is the interval time.
Now if we are pussing the function name like callAlert in the 1st one and 1000 in the 2nd one. Then it will be like
setTimeout(callAlert,1000); // 1000 milliseconds = 1 sec
setInterval(callAlert, 1000);
Now define the callAlert function
Function callAlert(){
alert(‘test alert’);
}

So for both the functions it will give alert message “test alert” but as mention earlier the setInterval will repeat the alert message every second.

Stop SetTimeout:

We have a function clearTimeout to stop setTimeout and SetInterval. You can call it any time like clearTimeout(myvar). myvar is the variable name you assign while start the timeout or interval function.

Real time example:

I am going to use it more complicated real time application like Facebook signup or login.
I have a requirement to add a feature Login with FB to one of my existing project. Now the client don’t wish to pay for much time, they need an quick development and the developer give me a situation like the Facebook login section will open in a new window and I need to wait for the returning mailed from the Facebook API. So I suggest the developer to bind the email id in a hidden field which I will check continuously.
So I gave him a hidden field.
<input type=”hidden” id=”facebookmailID” />

So clicking on the FB button I am opening a window.modal popup and running random function for checking the hidden field value.
var hasEmail = $("#facebookmailID").val();
I need to have another hidden field for checking error.We may get error while register with FB and we need to give another approach for error. It will be Boolean value.
So
var isFBError = $("#isFacebookError").val(); Now in the main thing we need to check the error and email fields length.
if (isFBError.toLowerCase() == "false"&& hasEmail != ''){
// continue process to function and stop the settimeout
}
Now if we get any error then
Else if (isFBError.toLowerCase() == "false"){
// Stop the timeout and show the error section
} The last one if the email field value is null and there is no error then continue the function.
So
else {
timeOut = setTimeout(doTheRandom);
// I don’t have mention the time as I want check immediately.
}
In this progress I don’t need to mention any clearTimeout because we only call SetTimeout at the time email and error return null.
So, what do you think about this process. I found this process much easier and flexible way to handle the issue and resolve it quicker way.

Error:

Now form the existing functionality we have an option Register with email functionality and FB process is the new one which we have to implement. Now image if a user click on the FB registration then he change the mind and again click on the normal Email process. Surely they can do, no reason to stop them.
But the setTimeout function is started when click on the FB registration. So we need to stop the random function and continue the process with normal registration with email and password.
So click on the registrar button a clearTimeout function we need to place.
Like
Function clickOnregisterwithEmail(){
clearTimeout(timeOut);
//continue your stuff
}
Onclick on the start button 1 is appending to the repeated work section, and click on the stop it you can stop the stop the setTimeout function.
Now if you click try it button multiple times and then click on the stop it you will not because you run the setTimeout function multiple time and clearTimeout only clear one of them.You also need to click stop multiple times as the number you press start.
Something happening for my project and I need to stop all the process at only one click of Normal registration button.

Resolved:

For click on the on button and stop all the setTimeout functions we need to check first how many times it clicked. For this I have placed a counter into the FB button click. Like
Var fbclick = ‘0’;
Function clickOnregisterwithFB(){
fbclick++;
//open FB window and other stuff
Random();
}

Now clicking on the Normal email process I am modify the script
function clickOnregisterwithEmail(){
for(i=0; i clearTimeout(timeOut);
}
//continue your stuff
}
Now it will stop all the timeout process. Hope this approach will help you too..