Question

我正在使用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功能时出错了？

Answer 1

这段代码：

        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()一次进行，因此取消更简单。

Answer 2

这是解决停止按钮问题的解决方案。如果你跟踪我，你也可以在它停止的地方恢复高亮显示功能。

<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>

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

2 个答案: