JSFiddle - React, Tailwind, and code Playground

by Ben Clayton

HTML

<input id="display" />
<div id="polls">

</div>

JavaScript

var percentdone = 0;
var last = 0;
var SID = null;
var polldelay = 100;
var lasttime = (new Date()).getTime();
document.addEventListener('DOMContentLoaded', (event) => {

  function serverTask() {

    percentdone++;
    if (percentdone >= 100) {
      clearInterval(SID);
    }

  }
  SID = setInterval(serverTask, 1000);// time is a dummy server activity, whose percentage done changes evry second.

	function getserverprogress(){
  	document.getElementById('display').value = percentdone + "%";
  }


  function polling() {
  	document.getElementById('polls').innerHTML += 'Poll<br/>';

    getserverprogress();

    if (percentdone != last) {
      last = percentdone;
      now = (new Date()).getTime();
      polldelay = parseInt((now - lasttime) * 0.7,10);
      lasttime = now;
    } else {
      polldelay += 100;
    }
    if (percentdone < 100){
    	POLLID = setTimeout(polling, polldelay);
    }

  }

	polling(); // start polling
});