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

Question

我需要一个函数来一个一个地打印字母，但在“，”之后暂停。我试图这样做，但没有奏效：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)}

Answer 1

我不确定您是否可以更改setTimeinterval一次定义的时间。最好使用setTimeout. 我正在使用递归函数来实现所需的 -

function print(string, i){

  var time = 50

  if(string[i]==",") time = 1000

  setTimeout(function(){

    span.innerHTML += string[i]

    if(i<string.length-1) print(string,++i)

  },time)

}

完整的例子可以在这里找到

Answer 2

首先，我认为setInterval这不是你要找的。由于您似乎只想延迟打印每个字符，setTimeout因此在这种情况下效果最佳。

我会将其分解，以便您可以专注于一次打印一个字符，然后您可以在主print函数中为字符串中的每个字符调用它。

这就是我将使用 Promises 做这样的事情的方式：

const printCharacter = (ch, idx) => new Promise(resolve => {

    let time = 50 * idx;

    if(ch === ',') {

        time = 150 + time * idx;

    }

    setTimeout(() => {

        const span = document.getElementById('text');

        span.innerHTML += ch;

        resolve();

    }, time)

});

const print = async string => {

    for(let i = 0; i < string.length; i++) {

        await printCharacter(string[i], i);

    }

};

这里可能会出现一些错误，例如基本字符串中存在多个逗号的时间。这只是我的第一次迭代。

Answer 3

我建议使用 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 => {

  span.textContent = '';

  for (let c of string) {

    span.textContent += c;

    await sleep(c === ',' ? 500 : 50);

  }

};

print('my text, and a comma');

<span id="text"></span>