Почему вызывая обе функции по очерёдно они работают одновременно. А они должны работать по очереди. Одна заканчивает работу, начинает работу вторая. Я же их вызваю по очереди, а они работают одновременно. Почему?
<html>
<title></title>
<head>
<span id="span1"></span>
<br></br>
<span id="span2"></span>
</head>
<body>
<script src="script.js"></script>
<script>
printContent("span1", str1);
printContent("span2", str2);
//document.getElementById("span1").style.width = document.body.clientWidth;
</script>
</body>
</html>
var str1 = "Text1";
var str2 = "Text2";
function printContent(id, string){
var element = document.getElementById(id);
var counter = 0;
var interval = window.setInterval(
function(){
element.innerHTML += string[counter++];
if(counter == string.length){
window.clearInterval(interval);
}
},
50
);
}