在for回圈中設定Timeout會改變最終輸出；如何延遲for回圈的運行，而不改變最終結果

我試圖在我的網站上使用一個javascript函式制作一個自定義打字機效果。為了在每個字母的輸入之間增加一個延遲，我為for回圈的每次運行實作了一個交錯的setTimeout，因此每次迭代都比前一次多延遲了300ms。我需要將特殊字符（' ' '<', '&gt'）作為單個字符而不是單個字母輸入，所以我有幾個else if條件。當setTimeout被排除時，這產生了預期的效果。然而，添加延遲的結果是在列印出整個字符后，拼出了這段代碼的單個字母。我怎樣才能解決這個問題呢？

。

function type(fullTxt, current = ') {
    for (let i = current.length, j = 0; i< fullTxt.length; i  , j  ) {
         setTimeout（function() {
            if (fullTxt.substring(i, i 6) === '&nbsp; ' ) {
                console.log(fullTxt.substring(0, i 6) ）。)
                i = i   5;
            } else if (fullTxt.substring(i, i 4) =='& lt; ') {
                console.log(fullTxt.substring(0, i 4) ）。)
                i = i   3;
            } else if (fullTxt.substring(i, i 3) == '& gt') {
                console.log(fullTxt.substring(0, i 3) ）。)
                i = i   2;
            } else {
                console.log(fullTxt.substring(0, i 1) ）。)
            }
            console.log(j); //included just to ensure j is counting properly。
            console.log(i); //included to check progress of loop。
            console.log(fullTxt.length); //include to check endpoint of for loop.
         }, j * 300）。)
    }
}

type('hello&nbsp; '); 

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

預期輸出：

// h
// 0
//0 //0
/span> 11
//he //he
/span> 1
/span> 1
//11 //11
/span> hel
//2 / hel
//2 // 2
/span> 11
/span>地獄
/span> 3
/span> 3
/span> 11
//hello //hello
//4 //4
//4 //4
// 11 // 11
//hello  
//span> 5
// 10
//11 //11

uj5u.com熱心網友回復：

你可以把setTimeout只放在console.log上，而不是圍繞整個if陳述句。

。

function type(fullTxt, current = ') {
  for (let i = current.length, j = 0; i < fullTxt.length; i  , j  ) {
    if (fullTxt.substring(i, i   6) =='& nbsp; ') {
      setTimeout（function() {
        console.log(fullTxt.substring(0, i   6) ）。)
      }, j * 300）。)
      i = i   5;
    } else if (fullTxt.substring(i, i   4) =='& lt; ') {
      setTimeout（function() {
        console.log(fullTxt.substring(0, i   4) ）。)
      }, j * 300）。)
      i = i   3;
    } else if (fullTxt.substring(i, i   3) == '& gt') {
      setTimeout（function() {
        console.log(fullTxt.substring(0, i   3) ）。)
      }, j * 300）。)
      i = i   2;
    } else {
      setTimeout（function() {
        console.log(fullTxt.substring(0, i   1) ）。)
      }, j * 300）。)
    }
    setTimeout（function() {
      console.log(j); //included just to ensure j is counting properly。
      console.log(i); //included to check progress of loop。
      console.log(fullTxt.length); //include to check endpoint of for loop.
    }, j * 300）。)
  }
}

type('hello&nbsp; '); 

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

uj5u.com熱心網友回復：

你可以使用async函式來實作這一點

。

 async function type（fullTxt, current = '') {
        for (let i = current.length, j = 0; i < fullTxt.length; i  , j  ) {
             await waitFor（j*300）。
                if (fullTxt.substring(i, i 6) === '&nbsp; ' ) {
                    console.log(fullTxt.substring(0, i 6) ）。)
                    i = i   5;
                } else if (fullTxt.substring(i, i 4) =='& lt; ') {
                    console.log(fullTxt.substring(0, i 4) ）。)
                    i = i   3;
                } else if (fullTxt.substring(i, i 3) == '& gt') {
                    console.log(fullTxt.substring(0, i 3) ）。)
                    i = i   2;
                } else {
                    console.log(fullTxt.substring(0, i 1) ）。)
                }
                console.log(j); //included just to ensure j is counting properly。
                console.log(i); //included to check progress of loop。
                console.log(fullTxt.length); //included to check endpoint of for loop。
             }
        }
    


type('hello&nbsp; ')。

這里是waitFor函式

function waitFor(ms){
  return new Promise(resolve=>  setTimeout（resolve,ms）)
}

uj5u.com熱心網友回復：

現在更安全的是使用async/await，呼叫一個Promise，這樣，你的回圈實際上是在等待前面的回圈完成。

這也使得東西很容易寫，或者后來的修改。

Timeout設定為2000ms用于演示。

。

async function type（fullTxt。current = '') {
    for (let i = current.length, j = 0; i < fullTxt.length; i  , j  ) {
            await wait(2000) //等待2000ms
            if (fullTxt.substring(i, i 6) === '&nbsp; ' ) {
                console.log(fullTxt.substring(0, i 6) ）。)
                i = i   5;
            } else if (fullTxt.substring(i, i 4) =='& lt; ') {
                console.log(fullTxt.substring(0, i 4) ）。)
                i = i   3;
            } else if (fullTxt.substring(i, i 3) == '& gt') {
                console.log(fullTxt.substring(0, i 3) ）。)
                i = i   2;
            } else {
                console.log(fullTxt.substring(0, i 1) ）。)
            }
            console.log(j); //included just to ensure j is counting properly。
            console.log(i); //included to check progress of loop。
            console.log(fullTxt.length); //include to check endpoint of for loop 
    }
}

//通用的Promise函式。
function wait(delayInMS) {
  return new Promise(（resolve）=>  setTimeout（resolve, delayInMS））。
}

type('hello&nbsp; '); 

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/312336.html

標籤：

上一篇：區塊鏈技術——作業量證明

下一篇：遞回回圈中的funccount不更新