How to refresh an iFrame with AJAX every 5 seconds?

Question

I am trying to refresh an iFrame with AJAX so the iFrame on my page doesn't blink. The code below works, but it's a major memory hog and it crashes the page after about 2 minutes. I'm trying to get this to work so it doesn't crash the page.

I'm using the iFrame which has a table in it and I want it to get the content every 2 seconds so it's updated. The AJAX code below is inside a page called table.php. I have this page (table.php) in an iFrame on my main page called dispatch1.php. The table id is "thistable".

<script>
    function checkRequest(){
      var interval = setInterval(function(){
      var request = $.ajax({
        url: "table.php",
        type: "post",
        datatype: "html"
      });
      request.done(function(msg){
        $("#thistable").html(msg);
      });
      },2000)
     }
    </script>

It is not clear if this code is part of the iframe or parent window. BTW, you need to provide more context in your question, e.g, how do you call `checkRequest()` method? BTW, if your request takes more than 2 seconds to complete, you will facing some issues, maybe what is currently happening. And usually, to refresh an iframe, you just update src property (maybe using timestamp to avoid any caching issue) but i guess this is why you don't: `I am trying to refresh an iFrame with AJAX so the iFrame on my page doesn't blink` — A. Wolff, May 09 '15 at 17:44
is `checkRequest` being called again and again...sounds like it. If it gets called eevry 2 seconds you are compounding the number of requests made each time by adding new interval timers — charlietfl, May 09 '15 at 17:51
What about changing `setInterval` to `setTimeout` and recall the function associated to the `setTimeout` one in the success callback of the AJAX? This doesn't ensure the delay, but will not even crash the browser — Razorphyn, May 09 '15 at 17:55

Razorphyn · Answer 1 · 2015-05-11T12:12:20.083

I think the best way is to use setTimeout, this means that the function will be called again five seconds after the previous call has finished, this doesn't refresh the page every five seconds, but five seconds after the previous refresh and so it shouldn't crash the browser.
Instead setInterval will call the function every five seconds regardless the fact that the previous call has finished or not, so maybe this could be the problem.

function checkRequest() {
    var interval = setTimeout(function () {
        $.ajax({
            url: "table.php",
            type: "post",
            datatype: "html"
        })
            .done(function (msg) {
            $("#thistable").html(msg);
        })
            .always(function () {
            checkRequest();
        });
    }, 5000);
}

I've tried this and so far it is working. In the image [here](http://i.imgur.com/os2cJFh.png), the Network tab in Chrome when opened shows it raising in MB or KB transferred at a constant rate still. But, this still hasn't caused the browser to run out of memory yet and crash, so that is good. I will let you know if this is the final solution. Thank you for the help! — Sam B., May 12 '15 at 01:42

score 0 · Answer 2 · edited May 23 '17 at 12:29

I believe what you are looking for is setInterval(), you can just call the setinterval on document.ready or either on some click of a button according to your need.

Here, the setInerval will run the scripts every 5 seconds

<script>
    $(function(){

        setInterval(function(){ 
           repeatedAjaxRequest();

         }, 5000);
        });

        function repeatedAjaxRequest(){

        //Your ajax statements goes here

        }
<script>

check out the link for more info Difference between setInterval and setTimeout

How to refresh an iFrame with AJAX every 5 seconds?

2 Answers2