Question

基本上我要做的就是在#words textarea上显示由#display提供的单词列表。每个单词一次显示一个，延迟getTextSpeed指定的时间量，该时间检索用户选择的速度选项。

例如，如果用户选择350 WPM作为延迟所需的速度，则每个字的延迟为117 ms。如果他们决定将其更改为400 WPM，延迟应该实时动态减少到150毫秒的延迟，而不必重新启动显示动画。

此外，如果单词包含标点字符，则显示单词后的延迟应加倍（例如：117 ms至234 ms），并且应删除该字符。如果标点符号有多个字符，则只删除一个（例如：“...” - ＆gt;“..”）

以下是相关方法和我尝试实现此行为。如果您需要其余代码（用于测试目的？），请参阅以下代码：HTML，Javascript，CSS。

我在控制台中没有遇到任何错误，但实际反映的行为并不是我想要的。

在动画开始时有一个滞后期，这似乎根据输入文本的长度而有所不同，并且每个单词之间的延迟远远超过它应该的长度。 ~~此外，标点符号似乎没有正确删除。~~编辑＃1：我只是仔细检查了string.remove语法，你应该把实际的String，实际上并没有从String超类中调用该方法。

如果您需要任何其他信息，请与我们联系。

var timer;

function start() {
  var text = document.getElementById("words").value;
  var list = text.split(/\s+/);
  runDisplay(list, "display");
}

function runDisplay(data, id) {
    var reader = document.getElementById(id);
    var index = 0;
    var punctDelay = 0;    
    if (timer) {
        clearInterval(timer);
    }
    if (data.length) {
        timer = setInterval(function() {
        var punctuation = [".", ",", ":", ";", "!", "?"];
        var word = data[index++];
        for (var j = 0; j < punctuation.length; j++) {
            if (!(word.indexOf(punctuation[j]) === -1)) {
                // word = String.replace(punctuation[j], ''); 
                word = word.replace(punctuation[j], ''); // see edit #1
                punctDelay = getTextSpeed();
            }
        }
        reader.innerHTML = word;
        index = index % data.length;
        }, getTextSpeed() + punctDelay); // change speed dynamically in real time
    }
}


function stop() {
  var display = document.getElementById("display");
  clearInterval(timer);
  timer = null;
  display.innerHTML = "";
}

function getTextSpeed() {
    var speeds = document.getElementById("speed");
    return speeds.options[speed.selectedIndex].value;
}

Javascript：处理具有多种延迟的计时器？

0 个答案: