I have the JS function that is invoked every 3 minutes by setInterval - how can I invoke it when page loads too?

Question

I have the following script:

    var results;
var cursor = 0;

function myFunction () {
    $.getJSON('list.php', function(json) {
        results = json.result;
        cursor = 0;

        // Now start printing
        printNext();
    });
}

function printNext(){
    if(cursor == results.length){
        // Reset the cursor back to the beginning.
        cursor = 0;
    }

    // Print the key1 in the div.
    //$('#device-content-user-text').html(results[cursor].key1);
    $('#device-content-user-text').hide('fast', function(){ $('#device-content-user-text').html(results[cursor].key1); $('#device-content-user-text').show('fast'); });

    // Set a delay for the current item to stay
    // Delay is key2 * 1000 seconds
    setTimeout(function(){
        printNext();
    }, results[cursor].key2 * 1000);

    // Advance the cursor.
    cursor++;
}

var interval = setInterval(function () { 
    myFunction(); 
}, 300000);  //make sql query every 5 minutes

and it gets the JSON string from the page list.php and prints the results one by one in a #device-content-user-text div. It is done every five minutes and the timer starts counting time when the user loads the page. How can I invoke this function also on the page load (and then normally every 5 minutes)? Thanks

Your `setInterval` just calls `myFunction()` so just call `myFunction()` outside interval. — Samurai, May 28 '15 at 11:36

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

4

Use document.ready() like

$(document).ready(function(){
    var interval = setInterval(function () { 
        myFunction(); 
    }, 300000);  //make sql query every 5 minutes
    myFunction();
});

Also, if your just calling myFunction inside the anonymous function of setInterval, just pass the function reference itself

$(document).ready(function() {
        var interval = setInterval(myFunction, 300000); //make sql query every 5 minutes
        myFunction();
    });

Update

Depending on what you meant by page 'load', there can be a world of difference between document.ready and load(). If you want to be absolutely sure everything is loaded(including frames, images, etc..) then do

$(window).load(function() {
            var interval = setInterval(myFunction, 300000); 
            myFunction();
        });

Otherwise, if it is sufficient that the DOM is ready, just stick with document.ready()

See jQuery - What are differences between $(document).ready and $(window).load?

edited Jun 20 '20 at 09:12

Community

1
1

answered May 28 '15 at 11:36

AmmarCSE

30,079
5
45
53

As a side note, there is a huge difference between document ready event and `page loads` but i guess it would work here – A. Wolff May 28 '15 at 11:44
@A.Wolff, no wait, looking it up :) – AmmarCSE May 28 '15 at 11:44
ahh http://stackoverflow.com/questions/8396407/jquery-what-are-differences-between-document-ready-and-window-load – AmmarCSE May 28 '15 at 11:45
Seeing logic of OP used code, the ready event would just be enough ;) – A. Wolff May 28 '15 at 11:48
@A.Wolff, still, I find it useful to pay attention to the finer points. Thanks so much for your awesome tip! Updated my answer – AmmarCSE May 28 '15 at 11:50

score 0 · Answer 2 · answered May 28 '15 at 11:41

0

 //Document ready
   $(function(){

        //call function
        myFunction();

       //put your interval here

    });

answered May 28 '15 at 11:41

dansasu11

875
1
9
17

I have the JS function that is invoked every 3 minutes by setInterval - how can I invoke it when page loads too?

2 Answers2