暂停和恢复 javascript 中的 setInterval

pause and resume setInterval in javascript

本文关键字：中的 setInterval javascript 恢复 暂停      更新时间：2023-09-26

我正在尝试在 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--);
}

目录

<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 - 全局我清除并重置了一段时间的新间隔。

希望这有帮助。

干杯

您必须使用嵌套超时。

  • 直接调用typeIt，因为这是默认操作。
  • 在 typeIt 中，添加一个 setTimeout，它将在完成时调用deleteIt。
  • 删除完成后，再次调用typeIt。

样品小提琴

你输入它将看起来像这样：

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)
}
相关文章：