如何使用setTimeout異步呼叫函式兩次

我正在嘗試使用setTimeout(). 我的打字機功能代碼如下：

function typeWriter(toWrite,isDelete=false){
    if(!isDelete && i<toWrite.length){
        document.getElementById("typewrite").innerHTML =toWrite.charAt(i);
        i  ;
        speed=Math.random()*100 100;
        setTimeout(typeWriter,speed,toWrite,false);       
    }
    else if(isDelete && i<toWrite.length){
        var typewrite=document.getElementById("typewrite");
        typewrite.innerHTML=typewrite.innerHTML.slice(0,-1);
        i  ;
        speed=100;
        setTimeout(typeWriter,speed,toWrite,true);     
    }  
}
 

我想呼叫代碼兩次，一次是寫一個字串，第二次是洗掉它的一部分。

我對承諾的把握仍然很不穩定，我的嘗試（如下）并沒有真正改變任何東西：

const intro=new Promise((resolve,reject)=>{
    resolve();
})

intro
    .then(typeWriter("hello world"))
    .then(typeWriter("world",true))

當我運行代碼時，不是輸入“Hello world”然后洗掉“world”。兩個函式開始同步運行，最終輸出為“world”。

我一直在努力解決這個問題的時間比我承認的要長，我將不勝感激。

謝謝！

uj5u.com熱心網友回復：

為了可鏈接， typeWriter 必須回傳一個函式。

例如

function typeWriter(toWrite,isDelete=false) {
   return new Promise((resolve, reject) => {


   })
}

如果您要使用 setTimout，并且您希望在轉到下一個鏈之前等待呼叫該函式，請將決議放在 settimeout 中。

例如

function typeWriter(toWrite,isDelete=false) {
   return new Promise((resolve, reject) => {
      setTimeout(() => {
          resolve("hello i am done")
      }, 1000)

   })
}

uj5u.com熱心網友回復：

請注意，我使用與您相同的語法 - 例如

.then(typeWriter("hello world"))

但在這種情況下，typeWriter回傳一個函式，所以它是合法的

const typeWriter = (toWrite, isDelete) => {
    const typewrite=document.getElementById("typewrite");
    if (!isDelete) {
        const fn = async (position = 0) => {
            if (position < toWrite.length) {
                typewrite.innerHTML  = toWrite.charAt(position);
                await new Promise(resolve => setTimeout(resolve, Math.random()*100   100));
                return fn(position 1);
            }
        };
        return () => fn(0);
    } else {
        const fn = async (position) => {
            if (position < toWrite.length) {
            
                typewrite.innerHTML = typewrite.innerHTML.slice(0,-1);
                await new Promise(resolve => setTimeout(resolve, 100));
                return fn(position   1);
            }
        };
        return () => fn(0);
    }
};
Promise.resolve()
.then(typeWriter("hello world"))
.then(typeWriter("world",true))

<div id="typewrite"></div>

uj5u.com熱心網友回復：

您正在typeWriter立即呼叫，而您確實打算將該呼叫傳遞給該then方法，并且僅在相關承諾解決時才呼叫該方法。您可以通過將() => typeWriter(......)匿名函式傳遞給then.

其次，typeWriter將必須回傳一個承諾，因此then只有在該承諾解決時才會呼叫下一個鏈式回呼。

我還會稍微更改函式的簽名，以便它首先洗掉給定數量的字符（可以是 0），然后插入給定的字串。

看起來是這樣的：

// Promisify setTimeout:
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

// Make async, so it returns a promise:
const typeWriter = async (numDelete, toWrite) => {
    const typewrite = document.getElementById("typewrite");
    // First delete a given number of characters
    while (numDelete-- > 0) {
        typewrite.textContent = typewrite.textContent.slice(0, -1);
        await delay(100);
    }
    // Then append new characters
    for (const letter of toWrite) {
        typewrite.textContent  = letter;
        await delay(Math.random()*100   100);
    }
};

Promise.resolve()
       // Pass a callback -- don't call typeWriter yourself
       .then(() => typeWriter(0, "hello world"))
       .then(() => typeWriter(5, ""));

<div id="typewrite"></div>

標籤：javascript异步异步等待承诺

上一篇：Asyncio獲得不同的輸出

下一篇：如何創建一個永遠不會決議的異步函式？