我使用 setTimeout 和 clearTimeout 函数以特定的指定时间间隔突出显示 textarea 元素中的单词。我遵循的步骤是:
- 从
textarea元素获取文本。 - 拆分成单词。
- 每 5 秒将每个单词输出到一个单独的
textarea元素中。
代码是:
<html>
<head>
<script type="text/javascript">
/* this function does the folloeing:
* 1. takes all the words in the textarea.
* 2. Separates them into words.
* 3. Iterate through the list of words.
* 4. Search and highlight each word for 1 second.
*/
var highlightBtn = document.getElementById("start");
var continueHighlight = false;
var text;
var highlighter;
var words;
function startHighlight(val) {
continueHighlight = val;
console.log("Highlight = " + continueHighlight);
//1. get words within textarea.
var textarea = document.getElementById("inputText");
text = textarea.value;
console.log("text = " + text);
//2. split text into words.
var words = text.split(' ');
console.log("There are " + words.length + " words in the text.");
//highlight();
if(continueHighlight) {
//3. iterate through list of words.
var i = 0;
while(i < words.length) {
highlighter = setTimeout(searchAndHighlight, 5000, words[i]);
//console.log("Word highlighting = " + words[i]);
i = i + 1;
}
} else {
console.log("Stopping highlighting.");
clearTimeout(highlighter);
}
}
function highlight() {
if(continueHighlight) {
//3. iterate through list of words.
var i = 0;
while(i < words.length) {
highlighter = setTimeout(searchAndHighlight, 5000, words[i]);
//console.log("Word highlighting = " + words[i]);
i = i + 1;
}
} else {
console.log("Stopping highlighting.");
clearTimeout(highlighter);
}
}
function searchAndHighlight(word) {
console.log("Highlighting word = " + word);
var output = document.getElementById("output");
output.value = word;
}
</script>
</head>
<body>
<textarea id="inputText"></textarea>
<br/>
<button id="start" onclick="startHighlight('true')">Start!</button>
<br/>
<button id="stop" onclick="startHighlight('false')">Stop!</button>
<br/>
<textarea id="output"></textarea>
</body>
</html>
我希望每 5 秒每个单词都会显示在第二个 textarea 中。这并没有发生。相反，我在 5 秒内什么也没听到，然后很快就接连出现了所有的单词。即使我按下停止按钮也会发生这种情况。我的问题:
使用setTimeout函数时哪里出错了？
最佳答案
这段代码:
var i = 0;
while(i < words.length) {
highlighter = setTimeout(searchAndHighlight, 5000, words[i]);
//console.log("Word highlighting = " + words[i]);
i = i + 1;
}
连续多次快速调用setTimeout()并将它们全部设置为同一时间。这将符合您等待 5 秒然后立即运行它们的症状。
您必须将每个连续的超时设置更长的时间，或者更改代码的结构，以便在第一个计时器触发之前不启动下一个计时器。
<小时/>以下是一次仅设置一个 setTimeout() 来解决此问题的方法。这也可以解决停止按钮问题:
function highlight() {
if(continueHighlight) {
var i = 0;
function next() {
if (i < words.length) {
highlighter = setTimeout(function() {
searchAndHighlight(words[i]);
i++;
next();
}, 5000);
}
}
next();
} else {
console.log("Stopping highlighting.");
clearTimeout(highlighter);
}
}
当你想停止渐进突出显示时，我不明白你为什么要走这么迂回的路线。您应该只调用 clearTimeout(highlighter)。无需像您所做的那样通过多个函数来做到这一点。
或者，设置连续更长的计时器的解决方案可以像这样工作:
var i = 0;
while(i < words.length) {
highlighter = setTimeout(searchAndHighlight, 5000 * (i+1), words[i]);
//console.log("Word highlighting = " + words[i]);
i = i + 1;
}
如果你想使用这种类型的解决方案，那么要解决停止按钮问题，你必须将所有计时器 ID 保留在一个数组中并取消所有它们。就我个人而言，我可能会重组代码，一次只有一个 setTimeout() 处于运行状态，当每个触发时，您将启动下一个。然后，您一次只能执行一次 setTimeout()，因此取消起来更简单。
关于javascript - 突出显示单词的超时功能无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22802554/