在jQuery Mobile中每3秒执行一次功能

Question

Am trying to create a function in jquery mobile that autorefreshes itself every 3 seconds when on a certain page.

I have tried:

 $(document).on('pageshow', '#chat',function(){

function autoload(){
   console.log('its after 3 sec')
     } 
autoload();

 });

How can i change the function to console.log('its after 3 sec') after 3 seconds that is how can i add the time interval.The function should only execute when one is on the page(#chat)

Answer 1

You can use the setInterval method, it will execute the specified function at the desired interval ( in milliseconds ).

$(document).on('pageshow', '#chat', function() {

    function autoload() {
        console.log('its after 3 sec')
    }

    setInterval(autoload(), 3000);

});

To stop execution when hiding the page, you could store the interval id and use the clearInterval method.

// store the interval id so we can clear it when the page is hidden
var intervalId;

$(document).on('pageshow', '#chat', function() {
    function autoload() {
        console.log('its after 3 sec')
    }
    intervalId = setInterval(autoload(), 3000);
});

$(document).on('pagehide', function() {
    clearInterval(intervalId);
});

You can also use the setTimeout method, similar to the setInterval method.

// store the timeout id so we can clear it when the page is hidden
var timeoutId;

$(document).on('pageshow', '#chat', function() {
    function autoload() {
        console.log('its after 3 sec')
        timeoutId = setTimeout(autoload(), 3000);
    }
    autoload();
});

$(document).on('pagehide', function() {
    clearTimeout(timeoutId);
});

Answer 2

$(document).on('pageshow', '#chat',function(){
    function autoload(){
        console.log('its after 3 sec')
    } 
    window.setInterval(autoload, 3 * 1000)
});