时间戳

首页 > 解决方案 > 如何在另一个函数完成读取输入的每个字母后终止 setInterval 函数？

javascript - 如何在另一个函数完成读取输入的每个字母后终止 setInterval 函数？

问题描述

<html>
<head>
<script defer>
 let start;
 let num = 0;
 let btn = document.getElementById('btn1');
 btn.onclick = timer;

 function timer() {
  if (start === undefined) {
  start = setInterval(count, 1000);
  }

}

clearInterval(start)

function count () {
  let input = document.getElementById('input1').value;
  let currentLet = input.charAt(num);
  if (currentLet !== '') 
  document.getElementById('output1').innerHTML = 'Your letters are: ' + currentLet;

  else {
     document.getElementById('output1').innerHTML = 'Your letters are: done' 
  }
   num++;
}
</script>
</head>
<body>        
   <h2>Programming Question 1</h2>
   <input type="text" id="input1"><button id="btn1">Press to start</button>
   <p id="output1"></p>
</body>
</html>

我正在尝试创建一个程序，您可以在其中输入文本到文本框中，然后，当您单击一个按钮时，它将每秒显示一个字母，直到所有字母都被输出。但是，我需要 setInterval 函数在输出显示“完成”后终止。我怎么做？我知道使用了 clearInterval，但我不知道在它达到“完成”后如何自动执行它。我创建了“开始”，以确保在完成读出当前输入的所有字母之前多次单击按钮时，间隔函数不会执行多次。如果我再次按下按钮或输入新的输入值，我还希望间隔再次开始计数

标签： javascriptsetintervalclearinterval

解决方案

您的第一个问题是 num 变量，您必须重置num每次单击按钮的变量。

function timer() {
   if () {
      num = 0
   }
}

登录clearInterval后即可使用done

if (currentLet !== '') 
    document.getElementById('output1').innerHTML = 'Your letters are: ' + currentLet;
else {
    document.getElementById('output1').innerHTML = 'Your letters are: done' 
    clearInterval(start)
}

最后，您无法控制intervalwith ，undefined因为您第一次声明了一个间隔，它永远不会undefined。您必须使用另一个变量，例如flag

完整代码；

let start;
let num = 0;
let flag;
let btn = document.getElementById('btn1');

btn.onclick = timer;

function timer() {
  if (!flag) {
    flag = true;
    start = setInterval(count, 1000);
    num = 0
  }
}

function count() {
  let input = document.getElementById('input1').value;
  let currentLet = input.charAt(num);

  if (currentLet !== '')
    document.getElementById('output1').innerHTML = 'Your letters are: ' + currentLet;
  else {
    document.getElementById('output1').innerHTML = 'Your letters are: done'
    clearInterval(start)
    flag = false
  }
  num++;
}
<html>

<head>

</head>

<body>
  <h2>Programming Question 1</h2>
  <input type="text" id="input1"><button id="btn1">Press to start</button>
  <p id="output1"></p>
</body>

</html>

推荐阅读