JSFiddle - React, Tailwind, and code Playground

by lshettyl

HTML

<div id="demo"></div>

JavaScript

$demo = $("#demo");  // remove - for demo only
    
var ajax1 = function() {
    $demo.append("Begin ajax call 1<br/>"); // remove - for demo only
    var dfd = $.Deferred();
    $.ajax({
        url: "/echo/xml/",
        //url: "functions.php?id=enter_game&name=<?php echo $name; ?>",
        type: "GET"
    }).done(function(result) {
        $demo.append("Ajax call 1 complete<br/>"); // remove - for demo only
        //your code...
        //............
        //............
        dfd.resolve(result);
    });
    return dfd.promise();
};

var ajax2 = function() {
    
    $.when(ajax1()).done(function(result) {
        
        // the variables from previous ajax call result are avaialable here
        //var user_id = result["current_user_id"];
        //var word_id = result["word_id"];
        
        $demo.append("Begin ajax call 2<br/>"); // remove - for demo only
        var times = 1;
        
        var repeatAjax = function() {
            if (times > 10) return; // remove - for demo only
            $demo.append("Ajax call 2 called " + times + " time(s)<br/>"); // remove - for demo only
            $.ajax({
                type: 'GET',
                url: "/echo/xml/", //['functions.php?user_id=', user_id, '&word_id=', word_id].join(""),
            }).done(function() {
                //your code...
                //............
                //............
                $demo.append("Ajax call 2 complete<br/>"); // remove - for demo only
                times++; // remove - for demo only
                setTimeout(repeatAjax, 1000);
            });
        };
        repeatAjax();
    });
};

//Start the function
ajax2();