javascript - 在javascript中暂停和恢复setInterval

Question

我正在尝试模仿 codility's 上的打字效果JavaScript中的首页，我已经实现了打字和删除的效果 使用 setInterval()。

这是其中的 jsfiddle: https://jsfiddle.net/yzfb8zow/

var span=document.getElementById("content");
var strings=["hello world","how r u??"];

var index=0;    //get string in the strings array
var chIndex=0;  //get char in string
var type=true;

setInterval(function(){
  if(index===strings.length)
    index=0;
  if(type){
    typeIt();
  }
  else
    deleteIt();
},200);

// type the string
function typeIt(){
  if(chIndex<strings[index].length)
    span.innerHTML=strings[index].substring(0,chIndex++);
  else
    type=false;
}

//delete the string
function deleteIt(){
  if(chIndex===0){
    index++;
    type=true;
  }
  else
    span.innerHTML=strings[index].substring(0,chIndex--);
}

html

<span id="content"></span>
<span id="cursor">|</span>

CSS

#cursor{
  -webkit-animation: 1s blink step-end infinite;
  -moz-animation: 1s blink step-end infinite;
  animation: 1s blink step-end infinite;
}

@keyframes blink {
  from, to {
    opacity:0;
  }
  50% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  from, to {
    opacity:0;
  }
  50% {
    opacity:1;
  }
}

@-webkit-keyframes blink {
  from, to {
    opacity:0;
  }
  50% {
    opacity:1;
  }
}

我无法理解的是如何在字符串更改开始和结束时暂停 setInterval 函数以获得清晰的闪烁光标。

我查过其他答案Pause and resume setInterval和 How do I stop a window.setInterval in javascript?但我无法理解如何在这种情况下使用它。

另外，如果您能告诉我如何改进我的代码，那就太好了。

Answer 1

我在这里编辑了你的代码是你的 jsfiddle 返回:https://jsfiddle.net/yzfb8zow/5/

还有一点代码解释

var typingFunction = function() {
  if (index === strings.length) {
    index = 0;
  }

  if (type) {
    typeIt();
  } else {
    deleteIt();
  }
}

我声明了您之前的输入功能，以便以后可以根据需要使用它。

var x = setInterval(typingFunction.bind(typingFunction), 200);

存储间隔以便稍后清除它 - 存储在全局变量中(不一定可以，还有其他解决方案但可以存储它)。

function typeIt() {
 if (chIndex == -1) {
    chIndex += 1;
    clearAndRestartInterval(1000);
    return;
  }


  if (chIndex <= strings[index].length) {
    span.innerHTML = strings[index].substring(0, chIndex++);
  } else {
    clearAndRestartInterval(1000);
    type = false;
    return;
  }
}

在 typeIt 函数中，我在 chIndex = -1 开始时清除间隔，等待一段时间，让光标闪烁，然后再重新开始间隔。比我在字符串末尾再次清除它。我的 chIndex 从 -1 开始，所以我知道什么时候开始闪烁。

其余代码不言自明。

随意编辑 clearAndRestartInterval 函数的参数，以设置开始和结束闪烁的时间。

function clearAndRestartInterval(timeOfRestart) {
    clearInterval(x);
    setTimeout(function() {
      x = setInterval(typingFunction.bind(typingFunction), 200);
    }, timeOfRestart);
}

最后但同样重要的是间隔的停止和重启功能。这非常简单，x - 是之前声明的 setInterval - 全局，我清除并用新的时间间隔重新设置。

希望这对您有所帮助。

干杯