我怎样才能延迟 .then 承诺？ [复制]

Question

我有以下功能：

async typewrite(what, where){} - 模拟某人输入文本
async typeerase(where){} - 类似于打字，但模拟某人按下退格键 typetimer(){} - 返回一个 promise，随机间隔来模拟打字速度。

基本上，我想做的是在typewrite 函数完成后，我想在一小段延迟后擦除文本。我尝试使用setTimeout 人为地延迟它，但这似乎不起作用。

---

以下代码按预期工作

typewrite('Hello world!', target).then(erase => typeerase(target));

let typetimer = (fmin, fmax) => ( 
  new Promise(res => setTimeout(res, Math.floor(Math.random() * (fmax - fmin + 1)) + fmin))
); 

const textarea = document.getElementById('textarea');

async function typewrite(what, where){
  let current_text = '';
  const typespeed_min = 50;
  const typespeed_max = 150;
  
  for (let i = 0; i < what.length; i++){
    await typetimer(typespeed_min, typespeed_max);
    current_text += what.charAt(i);
    where.innerHTML = current_text;
  }
}


async function typeerase(where){
  const erasespeed_min = 30;
  const erasespeed_max = 70;
  let current_text = where.textContent;
  
  while (current_text.length > 0){
    await typetimer(erasespeed_min, erasespeed_max)
    current_text = current_text.substring(0, current_text.length - 1);
    where.innerHTML = current_text;
  }  
}

typewrite('Hello, I am an asynchronous function!', textarea)
  .then(erase => typeerase(textarea));

html {
  font-family: 'Courier New';
  font-weight: bold;
  font-size: 15pt;
}

<p id="textarea"></p>

---

但是，应用人工setTimeout() 延迟似乎根本没有影响。

typewrite('Hello world!', target).then(erase => setTimeout(typeerase(target), 50000));

let typetimer = (fmin, fmax) => ( 
  new Promise(res => setTimeout(res, Math.floor(Math.random() * (fmax - fmin + 1)) + fmin))
); 

const textarea = document.getElementById('textarea');

async function typewrite(what, where){
  let current_text = '';
  const typespeed_min = 50;
  const typespeed_max = 150;
  
  for (let i = 0; i < what.length; i++){
    await typetimer(typespeed_min, typespeed_max);
    current_text += what.charAt(i);
    where.innerHTML = current_text;
  }
}


async function typeerase(where){
  const erasespeed_min = 30;
  const erasespeed_max = 150;
  let current_text = where.textContent;
  
  while (current_text.length > 0){
    await typetimer(erasespeed_min, erasespeed_max)
    current_text = current_text.substring(0, current_text.length - 1);
    where.innerHTML = current_text;
  }  
}

typewrite('Hello, I am an asynchronous function!', textarea)
  .then(erase => setTimeout(typeerase(textarea), 100000000));

html {
  font-family: 'Courier New';
  font-weight: bold;
  font-size: 15pt;
}

<p id="textarea"></p>

看来我在这里几乎错过了一些非常基本/基本的东西，但我似乎无法意识到我在这里做错了什么。

Answer 1

function delay(ms, resolveWith) {
    return new Promise(resolve=>setTimeout(resolve, ms, resolveWith));
}

typewrite('Hello world!', target)
  .then(erase => delay(5000, erase))
  .then(erase => typeerase(target));

Answer 2

简答：setTimeout 不能这样工作。您应该可以这样做：

typewrite('Hello world!', target)
    .then(erase => setTimeout(() => typeerase(target), 50000));

长答案：您可能应该使用包装 setTimeout 的辅助方法来产生所需的延迟（Noitidart's answer 显示了一个示例）...

typewrite('Hello world!', target)
    .then(() => delay(50000))
    .then(() => typeerase(target));

...然后使用await

await typewrite('Hello world!', target);
await delay(50000);
await typeerase(target);