JavaScript и задержки для показа учебника по адаптации с помощью подсказок в

Question

Я создал фреймворк приложения, чтобы показать и подключить учебник с помощью подсказок, показанных в последовательности. Они сделаны с элементами span и CSS из массива всплывающих подсказок json.

Он проходит хорошо, но когда я его запускаю, все работает, ничего не видя пользователю.

Я сделал свою собственную функцию сна, используя часы, чтобы обойти однопоточные проблемы. Я понятия не имею, где это идет не так, когда я запускаю это в дикой природе. Он показывает всплывающую подсказку, затем показывает следующую секунду перед удалением предыдущей. Позиционирование пока не является идеальным, но над этим можно работать. Любые идеи будут чувствовать себя как спасение

<script>
function Sleep(miliseconds) {
   var currentTime = new Date().getTime();

   while (currentTime + miliseconds >= new Date().getTime()) {
   }
}




//arrows 20%=leftside  50%=middle 80%=rightside
var tutorials;

tutorials ={
	"name": "tutorial",
	"tuts": [{
			"ordinal": "1",
			"elem": "testballoon",
			"text": "This is the post button, Click her to get to... ",
			"delay": "3000",
			"width": "180px",
			"position": "relative",
			"z-index": "1",
			"left": "10px",
			"top":"40px",
			"margin":"3px",
			"padding": "5px",
			"arrow":"20%",
			"clicktoclose": "no"
		},
		{
			"ordinal": "2",
			"elem": "testballoon2",
			"text": "From here you can set up all your ...",
			"delay": "3000",
			"width": "180px",
			"position": "relative",
			"z-index": "1",
			"left": "100%",
			"top":"40px",
			"margin":"3px",
			"padding": "5px",
			"arrow":"50%",
			"clicktoclose": "no"
		},
		{
			"ordinal": "3",
			"elem": "testballoon3",
			"text": "Use this button when you're ready to ...",
			"delay": "3000",
			"width": "180px",
			"position": "relative",
			"z-index": "1",
			"left": "100%",
			"top":"40px",
			"margin":"3px",
			"padding": "5px",
			"arrow":"50%",
			"clicktoclose": "no"
		}
	]
}


function tutorial(){
var cnt=0;
	for (i in tutorials.tuts) {
	//cnt++;
		var last;
		var delay;
		delay =parseInt(tutorials.tuts[i].delay);
		 
		elemin=  setTip(tutorials.tuts[i]);
		//elname =elmin.id;
		
			if (i >0){
				last=tutorials.tuts[i-1].ordinal;
				Sleep(1000);
				hidetip(last);
			}
			 delay=delay-1000;
			 Sleep(delay);
	  
	}
	hidetip(+last + +1); 

}



function setTip(tut){
var elementname =tut.elem; //where to position the baloon near
var elem =document.getElementById(elementname); //the dom element to position near
elem.classList.add("popup");
var elemin = document.createElement('span');//the popup
elem.appendChild(elemin);//place it inside
var tutno = tut.ordinal;
var txt =tut.text;
var p = document.createTextNode(txt);
elemin.appendChild(p);
elemin.id='tutorial'+tutno;
elemin.classList.add("popuptext" );
var wide =tut.width;
var pad =tut.padding;
var top =tut.top;
var margin =tut.margin;
var arrow =tut.arrow;
elemin.style.width =  wide;
elemin.style.padding =  pad;
elemin.style.margin =  margin;
elemin.style.top =  top;
//elemin.style.arrow =  arrow;   to to *
/* add the back button.
var bspan = document.createElement('span');
var htmlString ="<span class='float-right clickable closeme'> <a href='#' onClick='gotoTip('+tutno -1 + ','+tutno+');><b><</b></a></span>";
bspan.innerHTML = htmlString.trim();
elemin.appendChild(bspan.firstChild);
*/

//add the close button
 var ospan = document.createElement('span');
 var htmlString ="<span id='but" +tutno+ "' class='float-right clickable closeme'><a href='#' onClick='hidetip("+tutno+")'>x</a></span>";
 ospan.innerHTML = htmlString.trim();
 elemin.appendChild(ospan.firstChild);
 

showhide (elemin);
return elemin;

}

function showhide(elemin){
 
//elemin.classList.toggle("show");
elemin.classList.add("show");
}

function hidetip(nn){ //nn is normall passed i the aray ordinal
//n=n-1;
var sname= 'tutorial'+nn
var elemin=document.getElementById(sname);  //hidden=true;
elemin.classList.remove("show");
}

/*
x is the number of current tip just displayed
n is the one to jump to-normally x-1 going back
Going back, the tip already exists, it is just hidden
Going forward it will have to be built
*/
function gotoTip(n,x){
var sname = tutorials.tuts[n].id;
	if (n<x){
		document.getElementById(sname).classList.add("show");
	}
var curno = parseInt(n)+1;
var curname = tutorials.tuts[curno].id;
document.getElementById(curname).classList.remove("show");

}

</script>

 <style>
/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  //width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
 
}

/* Popup arrow */
 .popup .popuptext::after {
  content: "";
  position: absolute;
  top:0;
  left: 50%;
  border: 3px solid transparent;
  border-top: 0;
  border-bottom: 15px solid #555;
  transform: translate(-50%, calc(-100% - 5px));

 
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}


</style>

<html>
 <head>
 
  
 </head>

<body >
<div class ="no" style="width:300px;float:left;">
<div id ="testballoon" style="width:400px;" > one </div></div>  
<br> <br>
<br> <br><br> <br>

  <div class ="no" style="width: 300px;float:left;"><div  id ="testballoon2" style="width:400px;" > two
</div>
</div>

 <div class ="no" style="width: 300px;float:left;"><div  id ="testballoon3" style="width:400px;" > three
</div>
</div>
<br> <br>
<a href="#" onClick ="tutorial();"> test</a>
</body>
</html>