setInterval 与 setTimeout 哪个更适合运行以指定速度循环

Question

var speed = 200,
  len = 0;
if (e in know) {
  function typing() {
    if (len < know[e].length) {
      if (len === know[e].length - 1) {
        t.innerHTML = know[e];
        g = d.getAttribute("data-bottom") ? d.getAttribute("data-bottom") : 0;
        if (parseInt(g) < ((d.scrollHeight - t.offsetTop) - p.clientHeight) + 10) d.scrollTo(0, d.scrollHeight);
        else alert("new message");
      }
      len++;
      setTimeout(typing, speed);
    }
  }
  typing();

setTimeout 对比 setInterval代码...

var setIn = setInterval(() => {
  if (len < know[e].length) {
    if (len === know[e].length - 1) {
      clearInterval(setIn);
      t.innerHTML = know[e];
      g = d.getAttribute("data-bottom") ? d.getAttribute("data-bottom") : 0;
      if (parseInt(g) < ((d.scrollHeight - t.offsetTop) - p.clientHeight) + 10) d.scrollTo(0, d.scrollHeight);
      else alert("new message");
    }
    len++;
  }
}, speed)

我正在尝试制作一个回复机器人，它会在 1 秒后开始打字，并且会以 String.length 的速度回复，他们都做了同样的事情，但有人曾经告诉我使用 setTimeout 是不好的做法，但我需要他们运行那样做。如果有其他解决方法，我愿意接受所有建议，在此先感谢。

Answer 1

您可以有多种方法：

setInterval
setTimeout
window.requestAnimationFrame

如果你需要等待1秒，那么你必须有一个setTimeout并且里面，如果你想节省性能我鼓励你使用第三个选项，但是结合setTimeout和setInterval 是可用选项。使用它们通常不是坏习惯，只是在特定情况下。

Answer 2

您可以使用 async/await 来模拟打字并创建延迟：

//
// Async timeout function
const timeout = ms => new Promise(resolve => setTimeout(resolve, ms));

//
// Bot typing function
const runBot = text => {
  // Use promises
  return new Promise(async (resolve, reject) => {
    // DOM
    const div = document.getElementById('text');
    
    // Create chars array
    const chars = text.split('');
    
    // Wait 1 sec before typing
    await timeout(1000);
    
    // Type text
    while(chars.length) {
      // Put one char at iteration
      div.innerHTML += chars.shift();
      
      // Wait some amount
      await timeout(100);
    }
    
    // Add new line to the text box
    div.innerHTML += '<br>'
    
    // Finish function
    return resolve();
  });
}

//
// Text typing runner and button controller
const typeText = async text => {
  // DOM
  const button = document.querySelector('button');
  
  // Disable button
  button.disabled = true;
  
  // Run bot and wait till it finishes
  await runBot(text);
  
  // Enable button
  button.disabled = false;
}

<div id="text" style="padding:10px;border:1px solid #000"></div>
<button onClick="typeText('This is demo text!')">Start bot</button>

setInterval 与 setTimeout 哪个更适合运行以指定速度循环

setInterval vs setTimeout which is better to run a loop at a specified speed

javascript

settimeout

setinterval

setInterval 与 setTimeout 哪个更适合 运行 以指定速度循环

setInterval vs setTimeout which is better to run a loop at a specified speed

javascript

settimeout

setinterval

setInterval 与 setTimeout 哪个更适合运行以指定速度循环