如何延迟 For 循环以循环通过替换文本的数组
[英]How to Delay a For loop to cycle through an array that replaces text
问题描述
Im trying to replace this text and have the replaced text slowly loop through the array one element at a time.
我试图替换此文本并让替换的文本一次缓慢地循环遍历数组一个元素。 I did do a For loop at one point without any precautions of setting a delay and it just skipped to the end.我确实做了一个 For 循环，没有任何设置延迟的预防措施，它只是跳到最后。 I did find some other posts that go over loops with delays but never about replacing text fields.我确实发现了一些其他帖子，go 在循环中出现延迟，但从未涉及替换文本字段。 Right now it only shows the text "I only like Sample 2"现在它只显示文本“我只喜欢样本 2”
<DOCTYPE html>
<html>
<head>
<script>
var hobbies = ["Sample 1", "Sample 2", "Sample 3"];
function myFunction()
{
log();
};
var i = 0;
function log(){
for (let i = 1; i < 10; i++) {
setTimeout(function timer() {
var str = document.getElementById("demo").innerHTML;
var string = hobbies[i];
var res = str.replace("___", string);
document.getElementById("demo").innerHTML = res;
}, i * 3000);
}
}
</script>
</head>
<body>
<div id="demo">
<p> I only like ___ </p>
</div>
<button onclick="myFunction()">Click</button>
</body>
</html>
2 个解决方案
解决方案1
1 已采纳 2020-12-02 17:06:54
Technically what you've got is working, the loop is executing 9 times.从技术上讲，你所拥有的是工作，循环正在执行 9 次。 The main problem is that str.replace("___", string);主要问题是str.replace("___", string); will only ever work once, because you are overwriting what's inside the element.只会工作一次，因为您正在覆盖元素内部的内容。
There are a few things you can do here to improve/modernise the code and fix the issue - you are very close with what you had though.您可以在这里做一些事情来改进/现代化代码并解决问题 - 您已经非常接近您所拥有的。
var hobbies = ["Sample 1", "Sample 2", "Sample 3"];
function log(){
const elem = document.getElementById("demo");
const startStr = "I only like";
hobbies.forEach((hobby,i) => {
setTimeout(() => {
elem.innerHTML = `<p>${startStr} ${hobby}</p>`
}, i * 3000);
})
}
*Grab the demo element outside of your loop, that way you're not querying your DOM every time the loop runs. *在循环之外获取演示元素，这样您就不会在每次循环运行时都查询 DOM。
*Declare your starting string so you're not having to mess around with string replace. *声明你的起始字符串，这样你就不必搞乱字符串替换了。 (This can also be written where ${startStr} is instead as it is a template literal ). （这也可以写在 ${startStr} 所在的位置，因为它是一个模板文字）。
*You seem to have a function that does nothing but call another function, so your click event could simply call the latter function of log(). *您似乎有一个 function 除了调用另一个 function 之外什么都不做，所以您的点击事件可以简单地调用 log() 的后者 function。
*You could use a forEach rather than a regular foo loop, this means you do not have to care about how many items are in your hobbies array, the forEach will happily go through them all. *您可以使用 forEach 而不是常规的 foo 循环，这意味着您不必关心您的 hobbies 数组中有多少项目，forEach 将愉快地通过它们 go。
Edit: To have this continually loop it would be something like this:编辑：要让这个不断循环，它会是这样的：
var hobbies = ["Sample 1", "Sample 2", "Sample 3"];
function loop(delayTime) {
const elem = document.getElementById("demo");
const startStr = "I only like";
hobbies.forEach((hobby,i) => {
setTimeout(() => {
elem.innerHTML = `<p>${startStr} ${hobby}</p>`
}, i * delayTime);
})
}
function log(){
const delayTime = 3000;
loop(delayTime)
setInterval(function() {
loop(delayTime)
}, hobbies.length * delayTime);
}
解决方案2
0 2020-12-02 17:59:24
This code ended up working for me, thanks for the help!这段代码最终为我工作，感谢您的帮助！
<DOCTYPE html>
<html>
<head>
<script>
var hobbies = ["Sample 1", "Sample 2", "Sample 3"];
function log(){
const elem = document.getElementById("demo");
const startStr = "I only like";
hobbies.forEach((hobby,i) => {
setTimeout(() => {
elem.innerHTML = `<p>${startStr} ${hobby}</p>`
}, i * 3000);
})
}
</script>
</head>
<body>
<div id="demo">
<p> I only like ___ </p>
</div>
<button onclick="log()">Click</button>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.