Last Updated on August 24, 2022 by Roshan Parihar
In this tutorial, learn how to run script after 5 seconds using jQuery. The short answer is to use the setTimeout() function and specify the time in milliseconds.
You can get text content or set the value of an input box after 5 seconds in jQuery. It can also be used to execute a function after the specified time.
Let’s find out with the different examples with different uses given below.
How to Run Script After 5 Second on Button Click
To run a script after 5 seconds when someone clicks on a button, you can use the setTimeout() function of jQuery. It takes two arguments in which the first is the function function(){} that contains code to execute, The second is the time in milliseconds. It means that, if you want to run the script after 5 seconds, you have to pass 5000 as the second argument.
Use the text() function of jQuery to get the text content of the paragraph. See the example given below to learn the method.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> $(document).ready(function() { $('button').click(function(){ setTimeout(function(){ var mypara = $('p').text(); alert(mypara); }, 5000); }); }); </script> <p>This is a paragraph.</p> <button type="button">Click me</button> |
Output
This is a paragraph.
Click the above button to get text after 5 seconds
The above example contains the button element and the paragraph content. When you click the above button, it will give you the text content in the alert box after 5 seconds.
Execute code After 5 Seconds to Set Inputbox Value in jQuery
If you want to set the input box value after 5 seconds on button click, you can use the setTimeout() function. You have to pass the function that use val() function as the first argument to set the value of the input box. It also requires using the 5000 to execute the code after 5 seconds.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> $(document).ready(function() { $('button').click(function(){ setTimeout(function(){ }, 5000); }); }); </script> <input type="text"/> <button type="button">Set Input Value</button> |
Output
Click the above button to set the input box value after 5 seconds
The above example contains the input box and the button element. You can click the button given above to set the specified value for the input box. After you click the button, you will get the value of the input box.
Call Function After 5 Seconds in jQuery
In addition to the above examples, you can also call a function after 5 seconds using setTimeout() function of jQuery. You have to first declare a function with the required code to execute. After that, use the click event using the click() function within which use the setTimeout() function and the created function inside it. Also, pass 5000 as the second argument of the setTimeout() function.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> $(document).ready(function() { function myfn(){ alert("Welcome to TutorialDeep!") } $('button').click(function(){ setTimeout(function(){ myfn(); }, 5000); }); }); </script> <button type="button">Set Input Value</button> |
Output
Click the above button to execute the function after 5 seconds
When you click the button given above, it will call the function and execute the code present inside it. You will get an alert box with some messages present inside the created function.
You May Also Like to Read