JSFiddle - React, Tailwind, and code Playground

by jashwant

HTML

<p>
<button type="button" onClick="onButtonClick();">Get Numbers
</button>
</p>
<p id="ele"></p>

JavaScript

// Third party function, I cannot control
function thirdParty(callback) {

  var number = 0;

  var inner = function() {
    setTimeout(function() {
      next = inner;
      number = number + 10;
      callback(number, next);
    }, 1000);
  };

  inner();
}

// Code I can control
var nextFunc = null;

// Calls third party api
function getNumber() {
  return new Promise(function(resolve, reject) {
    if (nextFunc) {
      nextFunc();
    } else {
      thirdParty(function(number, next) {
      	console.log(number);
        nextFunc = next;
        resolve(number);
      });
    }
  });
}

function onButtonClick() {
  getNumber().then(function(number) {
    document.getElementById('ele').innerHTML += number + '<br>';
  });
}