How to Execute a Function Every x Seconds using jQuery

How to Execute a Function Every x Seconds using jQuery

In this article we will look at 2 examples of how to execute a function every x seconds with jQuery. In the first example, we will see how to change the background color of a page and the text color every 3 seconds , and in the second we will see how to run a PHP file using the AJAX technique.

Change the background color and text color of a Web page every 3 seconds

In the example we have the following HTML:

<body class = "white">
    <h1 class = "black"> Every 3 seconds will change the background color of the Web. </ h1>
</ body>

Note that the tab <body> has a class = “white” and the tag <h1> has a class = “black”.

As the name indicates we have in our stylesheet 2 classes representing black and white:

.white {
    background-color: #FFFFFF;
    color: # 000000;
}

.black {
    background-color: # 000000;
    Color: #FFFFFF;
}

And in the top of the page we have the jQuery code:

<script type = "text / javascript" src = "http://code.jquery.com/jquery-latest.min.js"> </ script>
<script type = "text / javascript">
$ (document) .ready (function () {    
    changeColor function () {
        if ($ ( 'body'). hasClass ( 'white')) {
            $ ( 'body') removeClass ( 'white.');
            $ ( 'body') addClass ( 'black.');
            $ ( 'h1') removeClass ( 'black.');
            $ ( 'h1') addClass ( 'white.');
        }
        else {
            $ ( 'body') removeClass ( 'black.');
            $ ( 'body') addClass ( 'white.');
            $ ( 'h1') removeClass ( 'white.');
            $ ( 'h1') addClass ( 'black.');
        }
    }

    setInterval (changeColor, 3000);
});
</ script>

The key issue is the main function or setInterval () to which we are passing 2 parameters: the function to be executed and the timeout in milliseconds to rerun.

In the changeColor () function all we do is remove and add the corresponding styles by touch. In this case, the background color will change to white black every 3 seconds.

They could do all kinds of features to add to the setInterval.

It is also possible to run a PHP file every x seconds using AJAX technology.

Show a random number between 0 and 100 every 3 seconds using AJAX technology

Add in the <body> will dump a container where results:

<span id = "value"> 0 </ span>

At the top of the page add the jQuery library and the necessary scripts:

<script type = "text / javascript" src = "http://code.jquery.com/jquery-latest.min.js"> </ script>
<script type = "text / javascript">
$ (document) .ready (function () {
    getRandValue function () {
        value = $ ( '# value') text ().;
        // Var datastring = 'value =' + value;

        $ .ajax ({
            type: "POST"
            url: "add.php"
            // Data: datastring,
            success: function (data) {
                $ ( '# value') text (data).;
            }
        });
    }

    setInterval (getRandValue, 3000);
});
</ Script>

We have a getRandValue () function does is run an AJAX running the add.php every 3 seconds returning a random value between 0 and 100 file.

The file contains only add.php:

<? Php
Echo rand (0,100);
?>

The example is very simple but it gives light to perform other operations such as saving a value in the database, update records every x seconds, write to a file, send an email, etc.

Lucid Kit

Related Posts
Leave a reply
Captcha Click on image to update the captcha .