JavaScript构造函数循环实现逐次1秒延迟输出的问题求助

我正在学习JavaScript构造函数，做实验卡了5小时。已经实现了SenderProfile父类，负责消息发送和发送者信息存储，这部分运行正常：

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} `);
    }
}

/* 测试示例
   const emailUser = new SenderProfile('adam@test.com');
   emailUser.sendMessage('hi', 'john@test.com');
   
   输出: adam@test.com sent hi to john@test.com
*/

接着创建了子类TelegramSender，想让delayMessage方法每隔1秒依次输出结果，但实际所有结果会在1秒后同时弹出，代码如下：

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

    // 新增延迟功能
    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秒显示第二条，以此类推。

问题根源 #

循环会瞬间执行完所有setTimeout调用，每个定时器都被设置为1秒后触发，因此它们会同时到期执行。另外循环条件i<=receiverLists.length会导致最后一次循环取到undefined（数组索引从0开始，长度为3的话最大有效索引是2），需要修正为i<receiverLists.length。

修复后的代码（forEach 写法） #

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

    delayMessage(message){
        receiverLists.forEach((receiver, index) => {
            setTimeout(() => {
                console.log(`${this.sender} on Telegram sent '${message}' to ${receiver}`);
            }, 1000 * (index + 1)) // 每条消息延迟时间递增：1s、2s、3s...
        })
    }            
}

修复后的代码（for 循环写法） #

如果偏好使用for循环，只需给每个定时器设置递增的延迟时间：

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

关键说明 #

• 将延迟时间设置为1000 * (index + 1)，让第一条消息延迟1秒，第二条延迟2秒，第三条延迟3秒，以此实现依次间隔1秒输出的效果。
• 修正循环条件，避免出现undefined的接收者。
• 调整了语法错误，将was send改为sent。

内容的提问来源于stack exchange，提问作者mamankpatur