gpt4 book ai didi

Javascript每次循环都暂停而不暂停

转载 作者:行者123 更新时间:2023-11-28 14:22:05 25 4
gpt4 key购买 nike

我正在尝试使用这个简单的脚本将关键字值附加到 div insidehtml 中。但我希望它在每次打印之间暂停。这是我到目前为止所得到的。现在,它只是立即转储所有内容而不会暂停,或者仅打印数组中的最后一个元素。不确定我做错了什么。

var root_keywords = [
"Keyword 1",
"Keyword 2",
"Keyword 3",
"Keyword 4"
];

document.getElementById("genBtn").addEventListener("click", createKeywords);
var kwDiv = document.getElementById("output");

function createKeywords()
{
root_keywords.forEach(function(kw)
{
var OldContents = kwDiv.innerHTML;
var NewContents = OldContents + kw + "<br />";
doAppend( NewContents );
});
}

function doAppend(kw) {
var kwDiv = document.getElementById("output");
setTimeout(function() { kwDiv.innerHTML = kw }, 500);
}
#output{
padding:10px;
width: 200px;
height: 200px;
background-color:#000;
display:block;
color:#66a565;
}
<!DOCTYPE html>
<html>
<head>
<title>Keyword Generator</title>
</head>
<body>

<h1>This is a Heading</h1>
<button type="button" id="genBtn">Generate</button>
<div id="output"></div>

</body>
</html>

最佳答案

将超时毫秒数乘以您正在迭代的当前索引,否则每个超时都会立即激活:

var root_keywords = [
"Keyword 1",
"Keyword 2",
"Keyword 3",
"Keyword 4"
];

document.getElementById("genBtn").addEventListener("click", createKeywords);
var kwDiv = document.getElementById("output");

function createKeywords() {
root_keywords.forEach(function(kw, i) {
var OldContents = kwDiv.innerHTML;
var NewContents = OldContents + kw + "<br />";
doAppend(NewContents, i);
});
}

function doAppend(kw, i) {
var kwDiv = document.getElementById("output");
setTimeout(function() {
kwDiv.innerHTML = kw
}, 500 * i);
}
#output {
padding: 10px;
width: 200px;
height: 200px;
background-color: #000;
display: block;
color: #66a565;
}
<h1>This is a Heading</h1>
<button type="button" id="genBtn">Generate</button>
<div id="output"></div>

关于Javascript每次循环都暂停而不暂停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54844800/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com