猿问

如何在 JavaScript 中的条件下更改间隔时间?

我需要一个函数来一个一个地打印字母,但在“,”之后暂停。我试图这样做,但没有奏效:


var span = document.getElementById('text')

function print(string){

  var i = 0

  var time = 50

  var timer = setInterval(function(){

    span.innerHTML += string[i++]

    if(string[i] == ","){

      time = 150

    }else{

      time = 50

    }  

  },time)

}


一只甜甜圈
浏览 178回答 3
3回答

明月笑刀无情

我不确定您是否可以更改setTimeinterval一次定义的时间。最好使用setTimeout. 我正在使用递归函数来实现所需的 -function print(string, i){&nbsp; var time = 50&nbsp; if(string[i]==",") time = 1000&nbsp; setTimeout(function(){&nbsp; &nbsp; span.innerHTML += string[i]&nbsp; &nbsp; if(i<string.length-1) print(string,++i)&nbsp; },time)}完整的例子可以在这里找到

慕村225694

首先,我认为setInterval这不是你要找的。由于您似乎只想延迟打印每个字符,setTimeout因此在这种情况下效果最佳。我会将其分解,以便您可以专注于一次打印一个字符,然后您可以在主print函数中为字符串中的每个字符调用它。这就是我将使用 Promises 做这样的事情的方式:const printCharacter = (ch, idx) => new Promise(resolve => {&nbsp; &nbsp; let time = 50 * idx;&nbsp; &nbsp; if(ch === ',') {&nbsp; &nbsp; &nbsp; &nbsp; time = 150 + time * idx;&nbsp; &nbsp; }&nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; &nbsp; const span = document.getElementById('text');&nbsp; &nbsp; &nbsp; &nbsp; span.innerHTML += ch;&nbsp; &nbsp; &nbsp; &nbsp; resolve();&nbsp; &nbsp; }, time)});const print = async string => {&nbsp; &nbsp; for(let i = 0; i < string.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; await printCharacter(string[i], i);&nbsp; &nbsp; }};这里可能会出现一些错误,例如基本字符串中存在多个逗号的时间。这只是我的第一次迭代。

PIPIONE

我建议使用 for 循环来迭代字符串,并使用 Promise 来根据需要暂停,而不是使用间隔。旁注,使用textContent代替innerHTML。前者像myCar.cangeTires(); myCar.closeDoors(),后者像myCar.do('change tires'); myCar.do('close doors');。let sleep = ms => new Promise(resolve => setTimeout(resolve, ms));var span = document.getElementById('text');let print = async string => {&nbsp; span.textContent = '';&nbsp; for (let c of string) {&nbsp; &nbsp; span.textContent += c;&nbsp; &nbsp; await sleep(c === ',' ? 500 : 50);&nbsp; }};print('my text, and a comma');<span id="text"></span>
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答