Javascript 用于突出显示单词的超时功能无法正常工作_Javascript_Html

Javascript 用于突出显示单词的超时功能无法正常工作

javascript html

Javascript 用于突出显示单词的超时功能无法正常工作,javascript,html,Javascript,Html,我正在使用setTimeout和clearTimeout函数以特定的间隔突出显示textarea元素中的单词。我将采取以下步骤：从textarea元素获取文本分成几个字每5秒钟将每个单词输出到一个单独的textarea元素中代码是： <html> <head> <script type="text/javascript"> /* this function does the folloeing: * 1. takes all the

我正在使用

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>


/*此函数执行以下操作：
* 1. 获取文本区域中的所有单词。
* 2. 把它们分成几个字。
* 3. 反复浏览单词列表。
* 4. 搜索并突出显示每个单词1秒钟。
*/
var highlightBtn=document.getElementById（“开始”）；
var continueHighlight=false；
var文本；
荧光灯；
变异词；
功能星光灯（val）{
continueHighlight=val；
console.log（“Highlight=“+continueHighlight”）；
//1.获取文本区域内的单词。
var textarea=document.getElementById（“inputText”）；
text=textarea.value；
console.log（“text=“+text”）；
//2.将文本拆分为单词。
var words=text.split（“”）；
log（“文本中有“+words.length+”个单词。”）；
//突出显示（）；
如果（连续高亮度）{
//3.反复浏览单词列表。
var i=0；
while（i
开始


停止

我希望每5秒钟在第二个

文本区域中显示每个单词。这并没有发生。相反，我在5秒钟内什么也没有得到，然后所有的单词都很快地连续出现。即使我按下停止按钮，这种情况也会发生。我的问题是:
使用setTimeout
功能时哪里出了问题
 这段代码：
        var i = 0;
        while(i < words.length) {
            highlighter = setTimeout(searchAndHighlight, 5000, words[i]);
            //console.log("Word highlighting = " + words[i]);
            i = i + 1;
        }

当你想停止渐进式高亮显示时，我不明白你为什么要走这样一条迂回的路线。您只需调用clearTimeout（荧光灯）
。没有必要像你这样做只是为了达到这个目的而经历多个功能
或者，连续设置更长计时器的解决方案可以如下工作：
        var i = 0;
        while(i < words.length) {
            highlighter = setTimeout(searchAndHighlight, 5000 * (i+1), words[i]);
            //console.log("Word highlighting = " + words[i]);
            i = i + 1;
        }

var i=0；
while（i

如果您想使用这种类型的解决方案，那么要解决停止按钮问题，您必须将所有计时器ID保留在一个数组中，然后取消所有计时器ID。就我个人而言，我可能会重新构造代码，一次只运行一个setTimeout（）
，当每一个都启动时，就启动下一个。然后，一次只运行一个setTimeout（）
，因此取消更简单。
以下是解决停止按钮问题的解决方案。如果你跟踪i，你也可以让highlight函数在它停止的地方继续
<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();
    //3. iterate through list of words.
    var i = 0;

     highlighter = setTimeout( function( ){
                searchAndHighlight( words, 0 );
            }, 5000);

    function searchAndHighlight(words, i ) {
        if(i >= words.length){
            clearTimeout(highlighter);
        }else{
            console.log("Highlighting word = " + words[i]);
            var output = document.getElementById("output");
            output.value = words[i];
            i++;
             highlighter = setTimeout( function( ){
                    searchAndHighlight( words, i );
                }, 5000);
        }
    }
}

function stopHighlight(){
  console.log("Stopping highlighting.");
  clearTimeout(highlighter);
}


</script>
</head>

    <body>
        <textarea id="inputText"></textarea>
        <br/>
        <button id="start" onclick="startHighlight()">Start!</button>
        <br/>
        <button id="stop" onclick="stopHighlight()">Stop!</button>
        <br/>
        <textarea id="output"></textarea>

    </body>

</html>


/*此函数执行以下操作：
* 1. 获取文本区域中的所有单词。
* 2. 把它们分成几个字。
* 3. 反复浏览单词列表。
* 4. 搜索并突出显示每个单词1秒钟。
*/
var highlightBtn=document.getElementById（“开始”）；
var continueHighlight=false；
var文本；
荧光灯；
变异词；
功能星光灯（val）{
continueHighlight=val；
console.log（“Highlight=“+continueHighlight”）；
//1.获取文本区域内的单词。
var textarea=document.getElementById（“inputText”）；
text=textarea.value；
console.log（“text=“+text”）；
//2.将文本拆分为单词。
var words=text.split（“”）；
log（“文本中有“+words.length+”个单词。”）；
//突出显示（）；
//3.反复浏览单词列表。
var i=0；
荧光灯=设置超时（函数（）{
搜索并突出显示（单词，0）；
}, 5000);
功能搜索和突出显示（单词，i）{
如果（i>=words.length）{
clearTimeout（荧光灯）；
}否则{
console.log（“突出显示word=“+words[i]）；
var output=document.getElementById（“输出”）；
output.value=字[i]；
i++；
荧光灯=设置超时（函数（）{
搜索并突出显示（单词，i）；
}, 5000);
}
}
}
函数stopHighlight（）{
log（“停止突出显示”）；
clearTimeout（荧光灯）；
}


开始


停止


谢谢。如何检测setTimeout已启动？@Sriram-我添加了一个代码建议。我不明白您最近评论中的问题是什么意思，因为当setTimeout（）启动时，将调用searchAndHighlight。@Sriram-添加了一个额外的代码解决方案，一次只运行一个计时器。感谢您的解释。我现在明白了
<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();
    //3. iterate through list of words.
    var i = 0;

     highlighter = setTimeout( function( ){
                searchAndHighlight( words, 0 );
            }, 5000);

    function searchAndHighlight(words, i ) {
        if(i >= words.length){
            clearTimeout(highlighter);
        }else{
            console.log("Highlighting word = " + words[i]);
            var output = document.getElementById("output");
            output.value = words[i];
            i++;
             highlighter = setTimeout( function( ){
                    searchAndHighlight( words, i );
                }, 5000);
        }
    }
}

function stopHighlight(){
  console.log("Stopping highlighting.");
  clearTimeout(highlighter);
}


</script>
</head>

    <body>
        <textarea id="inputText"></textarea>
        <br/>
        <button id="start" onclick="startHighlight()">Start!</button>
        <br/>
        <button id="stop" onclick="stopHighlight()">Stop!</button>
        <br/>
        <textarea id="output"></textarea>

    </body>

</html>