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

Question

I need a function that will print letters one by one but make pauses after ",". I tried to do it like this but it didn't work:

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

I am not sure you can change the time of setTimeinterval once defined. It is better to use a setTimeout . I'm using recursive function to achieve the desired -

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)

}

complete example can be found here

Answer 2

First, I don't think setInterval is what you're looking for. Since it seems you just want to print each character with a delay, setTimeout would work best in this situation.

I would break this up so that you can focus on printing a single character at a time, and then you can call that in your main print function for each character in the string.

This is how I would do something like this, using 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);
    }
};

There are some bugs that could present itself here, such as the timing for multiple commas present in your base string. This is just my first iteration.

Answer 3

Instead of using an interval, I recommend using a for loop to iterate the string and a Promise to pause as long as desired.

Side note, use textContent instead of innerHTML . The former is like myCar.cangeTires(); myCar.closeDoors() myCar.cangeTires(); myCar.closeDoors() , the latter is like myCar.do('change tires'); myCar.do('close doors'); 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>