为什么我的按钮需要按两次才能重新启动带有 Promises 的循环答案

【问题标题】：Why does my button need to be pressed twice to restart a loop with Promises为什么我的按钮需要按两次才能重新启动带有 Promises 的循环
【发布时间】：2023-02-10 18:58:32
【问题描述】：

该程序连续运行一个循环，直到我按下一个暂停循环的按钮。当我第二次按下按钮时，它应该开始连续运行。现在发生的事情是在第一次按下它时停止。然后第二次按下运行循环一次并再次停止。但是，当我第三次按下时，它确实再次开始连续运行。我该如何解决？


const timer = ms => new Promise(res => setTimeout(res, ms));

async function program_loop() {
    for (word_iterator = 0; word_iterator < some_length; word_iterator++) {
        if (stop == true) await pauser();
        //mini example
        word.innerHTML = text_words[word_iterator]
        await timer(200); 
    }
}

function pauser() {
    return new Promise(resolve => {
        let playbuttonclick = function () {
            if (stop == false) {
                stop = true;
                pausebutton.innerHTML = 'Start'
            }
            else if (stop == true) {
                stop = false;
                pausebutton.innerHTML = 'Stop'  
            }  
        resolve('resolved')
        }
    pausebutton.addEventListener('click', playbuttonclick)
    })
}

我试过删除 if (stop==true) await pauser() 但这毁了我的整个程序。从那时起，我需要按下按钮来推进循环。

【问题讨论】：

将 if (stop == true) 替换为 while (stop)

标签： javascript promise

【解决方案1】：

在循环的每次迭代中，在 stop == true 处，您添加一个新的按钮单击处理程序。因此，在几个循环之后，几个处理程序同时工作，相互干扰。安装处理程序一次或每次都删除旧的处理程序。

【讨论】：