嘗試循環構造 function 時，如何使此循環等待一段時間才能顯示下一個結果？

Question

我目前正在 javascript 中學習構造 function 並想對其進行一些實驗，但最終卡在這里大約 5 個小時並且沒有做什么。

所以，我有這個（超類）構造函數 function 來制作基本的 function 消息傳遞和保存關於誰是發件人的數據。 為什么我制作這個超類？ 因為將有超過 1 個子類需要相同的 function（發送消息），稍后我將在每個子類中添加一些不同的功能，但我不會將所有代碼放在這里，因為它工作得很好。

    const receiverLists = ['Ahmad', 'John', 'David'];

    class SenderProfile{
        // property
        constructor(sender){
            this.sender = String(sender);
        }

        // method
        sendMessage(message, receiver){
            console.log(`${this.sender} sent \`${message}\` to ${receiver} `);
        }
    }

    /* Let's try
       const emailUser = new SenderProfile('adam@test.com');
       emailUser.sendMessage('hi', 'john@test.com');
       
       output: adam@test.com sent hi to john@test.com
    */
 

這是我的名為 TelegramSender 的子類。 我對這段代碼的期望是每 1 秒返回一次所有結果。

    class TelegramSender extends SenderProfile {
        constructor(sender){
            super(sender);
        }

        // add delay feature
        delayMessage(message){
            for(let i=0; i<=receiverLists.length; i++){
                setTimeout(() => {
                    console.log(`${this.sender} on Telegram was send \'${message}\' to ${receiverLists[i]}`);
                }, 1000)
            }
        }            
    }

結果接近我的預期，因為結果在顯示之前延遲了 1 秒，但它們仍然同時顯示，我不希望這樣，我希望每個結果都會在等待 1 秒后顯示。

像這樣

1. 第一個結果在 1 秒后出現——在第二個結果出現之前等待 1 秒
2. 第二個結果出現。 等等...

請幫助我，因為我沒有精力解決這個問題。

Answer 1

我想你正在尋找這個：

class TelegramSender extends SenderProfile {
        ...
        delayMessage(message){
            for(let i=0; i<=receiverLists.length; i++){
                setTimeout(() => {
                   ...
                }, (i + 1) * 1000) // <--------------- increase the timeout
            }
        }            
    }

Answer 2

基本上會發生以下情況：您的 for 循環會立即運行。 在這樣做的同時，它會“同時”疊加您所有的 setTimeouts。 然后他們等待定義的 1000 毫秒，然后執行。 看起來他們沒有等待，因為他們幾乎是同時創建的。

您需要做的是定義一個“等待”變量，並在每次 for 循環完成時將計時器增加 1000 毫秒。 像這樣：

delayMessage(message){
        for(let i=0; i<=receiverLists.length; i++){
          const waitTime = (i + 1) * 1000;
            setTimeout(() => {
                console.log(`${this.sender} on Telegram was send \'${message}\' to ${receiverLists[i]}`);
            }, waitTime)
        }
    }    

現在發生的情況如下：您的 for 循環運行速度非常快，它定義了 waitTime 如下：

Cycle 1: i=0 -> waitTime = 0 + 1 * 1000 -> 1000ms
Cycle 2: i=1 -> waitTime = 1 + 1 * 1000 -> 2000ms
Cycle 3: i=2 -> waitTime = 2 + 1 * 1000 -> 3000ms
...

那應該是您想要的行為。