英文:
Remove then add elements one-by-one at intervals?
问题
I'm currently writing a web application that needs all the elements in the <body> tag to be added into the page one by one, at regular intervals. The elements first need to be removed from the page, then put in setTimeout() functions at regular intervals to add them back in. Here's what I have so far:
window.onload = function() {
var body = document.getElementsByTagName("body")[0];
var time = 0;
for (var i = body.children.length - 1; i > 0; i--) {
var element = body.children[i]; // get element
body.removeChild(element); // remove element from page
window.setTimeout(function() { // in [time] seconds, add element back into page
body.appendChild(element);
}, time);
time += 5000; // five seconds between elements going into the page
}
}
For some reason, this only adds in the first two elements, and the rest are ignored. I think it might be an issue with storing element in a setTimeout() call, but I'm not quite sure. Is there a better way to do this?
英文:
I'm currently writing a web application that needs all the elements in the <body> tag to be added into the page one by one, at regular intervals. The elements first need to be removed from the page, then put in setTimeout() functions at regular intervals to add them back in. Here's what I have so far:
window.onload = function() {
var body = document.getElementsByTagName("body")[0];
var time = 0;
for (var i = body.children.length - 1; i > 0; i--) {
var element = body.children[i]; // get element
body.removeChild(element); // remove element from page
window.setTimeout(function() { // in [time] seconds, add element back into page
body.appendChild(element);
}, time);
time += 5000; // five seconds between elements going into the page
}
}
For some reason, this only adds in the first two elements, and the rest are ignored. I think it might be an issue with storing element in a setTimeout() call, but I'm not quite sure. Is there a better way to do this?
答案1
得分: 1
<!doctype html>
<html>
<head>
<title>svg</title>
<meta name="description" content="React Temaplte">
<meta name="keywords" content="React template">
<link rel ="stylesheet" href="styles.css">
</head>
<body class="body">
<div class="a Invis">Hello1</div>
<div class="a Invis">Hello2</div>
<div class="a Invis">Hello3</div>
<div class="a Invis">Hello4</div>
<div class="a Invis">Hello5</div>
</body>
<script src="scripts.js"></script>
</html>
英文:
I am using CSS and the visibility property as well as adding class names to make the changes necessary over time
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
collection = document.getElementsByClassName("a")
array = Array.from(collection)
array.forEach(ele => {ele.classList.add("Invis")})
array.forEach((element,index) => {
setTimeout(()=>{
element.classList.remove("Invis")
element.classList.add("Vis")
console.log("TimeOut")
},1000*(1+index))
})
<!-- language: lang-css -->
.Invis {
visibility: hidden;
}
.Vis {
visibility: visible;
}
<!-- language: lang-html -->
<!doctype html>
<html>
<head>
<title>svg</title>
<meta name="description" content="React Temaplte">
<meta name="keywords" content="React template">
<link rel ="stylesheet" href="styles.css">
</head>
<body class="body">
<div class="a">Hello1</div>
<div class="a">Hello2</div>
<div class="a">Hello3</div>
<div class="a">Hello4</div>
<div class="a">Hello5</div>
</body>
<script src="scripts.js"></script>
</html>
<!-- end snippet -->
答案2
得分: 1
You need i <= 0, because you are skipping over the last child (the first element when looping backwards).
如果你想要正向循环，改变你设置持续时间的方式。
英文:
You need i <= 0, because you are skipping over the last child (the first element when looping backwards).
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
window.onload = function() {
setTimeout(function() {
// BEGIN
const body = document.body; // No need to call a method
let time = 0;
for (let i = body.children.length - 1; i >= 0; i--) {
const removed = body.removeChild(body.children[i]); // remove element from page
window.setTimeout(function() { // in [time] seconds, add element back into page
body.appendChild(removed);
}, time);
time += 1000; // 1 second between elements being added back
}
// END
}, 1000); // Wait 1 second, then remove all
}
<!-- language: lang-html -->
<p>One</p>
<p>Two</p>
<p>Three</p>
<p>Four</p>
<p>Five</p>
<!-- end snippet -->
If you want to loop forwards, change the way you set your duration.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
window.onload = function() {
setTimeout(function() {
// BEGIN
const body = document.body; // No need to call a method
let time = 0;
for (let i = body.children.length - 1; i >= 0; i--) {
const removed = body.removeChild(body.children[i]); // remove element from page
window.setTimeout(function() { // in [time] seconds, add element back into page
body.appendChild(removed);
}, time);
time = (body.children.length * 1000); // 1 second between elements being added back
}
// END
}, 1000); // Wait 1 second, then remove all
}
<!-- language: lang-html -->
<p>One</p>
<p>Two</p>
<p>Three</p>
<p>Four</p>
<p>Five</p>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论