JSFiddle - React, Tailwind, and code Playground

by prince4prodigy

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

</body>
</html>

JavaScript

/* Disable API call because we don't have that API, 
  replace similar callback function for demo purpose
*/

let resultA, resultB, resultC;

function addAsync (num1, num2, callback) {
	// use the famous jQuery getJSON callback API
 
  $.ajax({
        type: 'GET',
        dataType: 'jsonp',
        data: {},
        url: "https://www.codekade.com/api/math/getsum?number1=2&number2=112",
        error: function (jqXHR, textStatus, errorThrown) {
            console.log("jqXHR : ",jqXHR)
            console.log("textStatus : ",textStatus)
            console.log("errorThrown : ",errorThrown)
        },
        success: function (msg) {
            console.log("msg : ", msg);
        }
    });
 
 
  //return $.getJSON('http://testapi.codekade.com/api/math/getsum?number1=2&number2=3', {
 //		num1: num1,
 //		num2: num2
 //	}, callback);
    const cb = $.Callbacks();
    cb.add(callback);
    cb.fire(num1+num2);
}

addAsync(1, 2, success => {
	// callback 1
	resultA = success; // you get result = 3 here
  
	addAsync(resultA, 3, success => {
		// callback 2
		resultB = success; // you get result = 6 here

		addAsync(resultB, 4, success => {
			// callback 3
			resultC = success; // you get result = 10 here
            
            console.log('total' + resultC);
            console.log(resultA, resultB, resultC);
        });
	});
});