How to delay a ajax function? setTimeout does't work

Question

There are 6 iframes in page A. When every iframe is loaded, it needs to send an ajax request to page B and rewrite the data in the database at first and then the src of this iframe direct to another page C (in page C, there are some calculation based on the rewritten database). After all this have been done, the next iframe will be loaded. This is a "for" loop used language php. But now there is a problem, because in page C there are a lot of calculations, it needs a little long time to calculate. When this iframe is calculating, next iframe has sent his ajax request to page B and the database has been changed. So how I can let the next iframe send his ajax request after this iframe has been loaded totally? I have tried settimeout and set the delay to 12s. but it still has the problem.

Page A:

<?php
    echo " <table>";

        for($i=0; $i<2; $i++) {
            echo "<tr>";

            for($j=0; $j<3; $j++) {
                $divid="div".$i*3+$j;
                echo "<iframe id=$divid frameborder='0' height=400></iframe>";
                echo "<script language='JavaScript'>showpic($divid);</script></td>";
            }

            echo "</tr>";
        }
    echo "</table>";
?>

<script>
    function showpic(divid) {
        var url = "b.php";
        var oBao = CreateHTTPObject();
        var sendstring="id="+divid; 

        oBao.open("POST",url,false);
        oBao.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        oBao.onreadystatechange = function () { OnReadyStateChng(divid);};
        oBao.send(sendstring); 
    }

    function OnReadyStateChng(divid) {
        if (xmlhttp.readyState == 4) {
            if (xmlhttp.status == 200) {
                document.getElementById(id).src="c.php?id="+divid ;
            } else {

            }
        } else {

        }
    }

    function CreateHTTPObject() {    
        try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            try {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                xmlhttp = false;
            }
        }

        if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
            try {
                xmlhttp = new XMLHttpRequest();
            } catch(e) {
                xmlhttp=false;
            }
        }

        if (!xmlhttp && window.createRequest) {
            try {
                xmlhttp = window.createRequest();
            } catch (e) {
                xmlhttp=false;
            }
        }

    return xmlhttp;
    }
</script>

check this answer please http://stackoverflow.com/questions/18965768/set-a-delay-in-a-jquery-ajax-function — dev1234, Dec 16 '13 at 10:41
Possible duplicate http://stackoverflow.com/questions/18965768/set-a-delay-in-a-jquery-ajax-function — bgs, Dec 16 '13 at 10:43

score 0 · Answer 1 · answered Dec 16 '13 at 10:42

0

Try this :

// set your delay here, 2 seconds as an example...
var my_delay = 2000;

// call your ajax function when the document is ready...
$(function() {
    callAjax();
});

// function that processes your ajax calls...
function callAjax() {
    $.ajax({
        // ajax parameters here...
        // ...
        success: function() {
            setTimeout(callAjax, my_delay);
        }
    });
}

answered Dec 16 '13 at 10:42

bgs

3,061
7
40
58

could you tell me how to write in javascript? i am not familiar with jquery. i put setTimeout in OnReadyStateChng. but it seems wrong. it always calls callAjax() with no stop. function OnReadyStateChng(divid) { if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { setTimeout(callAjax, my_delay);//add here???? } else { } } else { } } – mji Dec 16 '13 at 15:06

score 0 · Answer 2 · answered Dec 16 '13 at 11:02

0

The following code synchronizes the ajax call so, the ajax calls are executed in the order of requests.

    $.ajax({
        url: yourUrl,
        async: false,
        dataType: html
    }).done(function(data) {
        // Handle response here
    };

More details: http://api.jquery.com/jQuery.ajax/

answered Dec 16 '13 at 11:02

Airan

477
2
13

could you tell me how to write it in javascript? – mji Dec 17 '13 at 10:33
Sorry, javascript does not provide synchronization for ajax. Better use Jquery, it is more advanced and simple. Still you wanna use JS then we have to work around it. – Airan Dec 17 '13 at 12:39

How to delay a ajax function? setTimeout does't work

2 Answers2