暂停并恢复javascript中的setInterval

slumbergeist 发表于 Dev

沉睡的地质学家

我试图模仿JavaScript在codility主页上的打字效果，我已经使用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函数，以使光标清晰闪烁。

我查找了其他答案暂停并恢复setInterval以及如何在javascript中停止window.setInterval？但是我无法理解如何在这种情况下使用它。

如果您能告诉我如何改进我的代码，那也很好。

阿特里凡

我编辑了您的代码，这里是您的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-全局值，我会在一段时间后以新的间隔进行清除和重置。

希望这可以帮助。

干杯

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。