jQuery Using SetInterval Function

The jQuery setInterval function allows to call a function to execute in a set time delay in milli-seconds. With the use of jQuery setInterval function, many interesting animation or repeated jobs can be accomplished easily.

There are some ways in using the jQuery setInterval function. Let’s discuss them one by one.

The first method is shown as below:

<head>
<title>jQuery Using SetInterval Function 1</title>

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.random.js"></script>

    <script type="text/javascript">

        jQuery("document").ready(function() {

        function generateRandomNumber() {

            // Generate a random number between 10 and 60
            // Here I used a plugin - jquery.random.js
            var ranNum = $.randomBetween(10, 60);

            // Display number on text field
            jQuery(".outputText").text(ranNum);
        }

        // Execute the function in set interval (milli-seconds)
        setInterval(generateRandomNumber, 5000);

        });
    </script>
</head>

<body>
    <h2>jQuery Using SetInterval Function 1</h2>
    The random number is: <span>Random Numbers...</span>
</body>
</html>

Demo:

jQuery Example File:

Click here to download.

The above jQuery setInterval function is working fine if the codes will be executed continuously.

Take a look at the second method:

<head>
<title>jQuery Using SetInterval Function 1</title>
                                                                 
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.random.js"></script>

    <script type="text/javascript">

        jQuery("document").ready(function() {

        function generateRandomNumber() {

            // Generate a random number between 10 and 60
                    // Here I used a plugin - jquery.random.js
                    var ranNum = $.randomBetween(10, 60);

            if (ranNum > 19) {
                // Display number on text field
                jQuery(".outputText").text(ranNum);
            } else {
                // Stop the process with clearInterval
                            clearInterval(myTimer1);

                // Display number on text field
                jQuery(".outputText").text("Random Number smaller than 20");
            }

        }

        // Execute the function in set interval (milli-seconds)
        var myTimer1 = setInterval(generateRandomNumber, 5000);

        });
    </script>
</head>

<body>
    <h2>jQuery Using SetInterval Function 2</h2>
    The random number is: <span>Random Numbers...</span>
</body>
</html>

Demo:

jQuery Example File:

Click here to download.

In this method, a variable is assigned to the setInterval. The setInterval function returns an ID every time when it is executed.  Therefore we can use the clearInterval to stop the setInterval function when it meets a certain criteria.

Let’s take a look at the third method using the jQuery setInterval function.

<head>
<title>jQuery Using SetInterval Function 3</title>
                                                                 
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.random.js"></script>

    <script type="text/javascript">

        jQuery("document").ready(function() {
        
        myTimer = setInterval(function () {
    
                    // Generate a random number between 10 and 60
                    // Here I used a plugin - jquery.random.js
                    var ranNum = $.randomBetween(10, 60);
               
                    // Display the random number on web page
                    $(".outputText").text(ranNum);   
    
           }, 4000);

        });
    </script>
</head>

<body>
    <h2>jQuery Using SetInterval Function 3</h2>
    The random number is: <span>Random Numbers...</span>
</body>
</html>

Demo:

jQuery Example File:

Click here to download.

Many jQuery developers like to use the third method in using the setInterval function. Actually, this is up to you.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>