приведено ниже кодов, показывающих использование setTimeout, setInterval & location.reload, какие другие опции доступны?
следующий уровень, который я хочу, - добавить элемент управления, чтобы позволить пользователю легко переключаться вперед / назад.
codepen, используя setTimeout & location.reload (требуется перезагрузка страницы - хотите избежать этого) https://codepen.io/GuruAtWork/pen/PoPYbKK
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<div id="info">start</div>
<script>
var elem = document.getElementById("info");
setTimeout(function () {
elem.innerHTML = "one";
}, 1000);
setTimeout(function () {
elem.innerHTML = "two";
}, 2000);
setTimeout(function () {
elem.innerHTML = "three";
}, 3000);
setTimeout(function(){
//window.location.reload(1);
location.reload()
}, 4000);
</script>
</body>
</html>
кодирование с использованием setInterval, вложенного в setTimeout https://codepen.io/GuruAtWork/pen/rNOBjBa
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<div id="info">start</div>
<script>
var elem = document.getElementById("info");
setTimeout(function () {
console.log("setTimeout 1000")
elem.innerHTML = "setTimeout 1000";
setInterval(function () {
elem.innerHTML = "setInterval one";
console.log("setInterval 1000")
}, 4000);
}, 1000);
setTimeout(function () {
console.log("setTimeout 2000")
elem.innerHTML = "setTimeout 2000";
setInterval(function () {
console.log("setInterval 2000")
elem.innerHTML = "setInterval two";
}, 4000);
}, 2000);
setTimeout(function () {
console.log("setTimeout 3000")
elem.innerHTML = "setTimeout 3000";
setInterval(function () {
console.log("setInterval 3000")
elem.innerHTML = "setInterval three";
}, 4000);
}, 3000);
</script>
</body>
</html>