Question

我试图在JavaScript中模仿codility's主页上的输入效果。我已经实现了打字和删除效果使用setInterval（）。

这是其中的一个方面： 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

您必须使用嵌套超时。

直接致电typeIt，作为默认操作。
在typeIt中，添加一个setTimeout，它将在完成时调用deleteIt。
完成deleteIt后，再次致电typeIt。

Sample Fiddle

你打字会看起来像这样：

function typeIt() {
  var t_interval = setInterval(function() {
    if (chIndex <= strings[index].length)
      span.innerHTML = strings[index].substring(0, chIndex++);
    else {
      type = false;
      // This is to be executed once action is completed.
      window.clearInterval(t_interval);
    }
  }, 20)
}

Answer 2

我在这里编辑了你的代码是你的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 - 全局，我用一段时间的新间隔清除和重置。

希望这有帮助。

干杯

在javascript中暂停并恢复setInterval

2 个答案: