暂停并继续变量递增

Question

我需要在 var i 达到 25 时暂停递增，并在按下提交按钮时继续递增。抱歉乱码。是否有更简单的方法来插入换行符？感谢您抽出时间提供帮助。
Link to Codepen

var p = document.getElementsByClassName('num'),
  resetBtn = document.getElementById('reset'),
  nameTxt = document.getElementsByTagName('input')[0],
  nameSubmit = document.getElementById('submit')
var i = 0
var text = "Hello. What is your name?"
var breaks = [6]
var name = ""

setInterval(function(){
 if (breaks.includes(i) == true){
  p[0].innerHTML += "<br>"
 } else {
 p[0].innerHTML += text.charAt(i)
 }
 i++
 if (i == 25){
  nameTxt.style.visibility = "visible"
  nameSubmit.style.visibility = "visible"
 }
},100)

resetBtn.onclick = function(){
 i = 0
 p[0].innerHTML = ""
}
nameTxt.style.visibility = "hidden"
nameSubmit.style.visibility = "hidden"

nameSubmit.onclick = function(){
 name = nameTxt.value
 nameTxt.style.visibility = "hidden"
 nameSubmit.style.visibility = "hidden"
}

@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);

body{
   font-family: 'Press Start 2P',serif;
 background: black;
 color: limegreen
}
button{
 width: 100px;
 height: 25px;
 font-family: 'Press Start 2P',serif;
 background: black;
 color: limegreen;
 border-color: limegreen;
 cursor: pointer
}
input{
 width: 100px;
 height: 25px;
 font-family: 'Press Start 2P',serif;
 background: black;
 color: limegreen;
 border-color: limegreen;
 cursor: pointer;
}

<text class="num"></text>
<input><button id="submit">Submit</button>
<br>
<button id="reset">Reset</button>

重置

Answer 1

使用标志

var p = document.getElementsByClassName('num'),
        resetBtn = document.getElementById('reset'),
        nameTxt = document.getElementsByTagName('input')[0],
        nameSubmit = document.getElementById('submit')
var i = 0
var text = "Hello. What is your name?"
var breaks = [6]
var name = ""
var btnClicked = false;

setInterval(function(){
    if (breaks.includes(i) == true){
        p[0].innerHTML += "<br>"
    } else {
    p[0].innerHTML += text.charAt(i)
    }
    if (btnClicked || i < 25) i++;
    if (i == 25){
        nameTxt.style.visibility = "visible"
        nameSubmit.style.visibility = "visible"
    }
},100)

resetBtn.onclick = function(){
    i = 0
    p[0].innerHTML = ""
}
nameTxt.style.visibility = "hidden"
nameSubmit.style.visibility = "hidden"

nameSubmit.onclick = function(){
        btnClicked = true;
    name = nameTxt.value
    nameTxt.style.visibility = "hidden"
    nameSubmit.style.visibility = "hidden"
}

暂停并继续变量递增

Pause and Continue Variable Incrementing

javascript

variables

codepen