javascript - 如何在 forEach 循环运行时阻止它不被执行两次？

Question

我有一个名为 sendMail 的函数，它可以获取一些电子邮件地址并为此用户发送邮件。

通过单击用户界面中的按钮来调用此函数。

但是，如果多次调用此函数，则电子邮件也会发送多次。

我想阻止该函数在它已经运行时不再执行。我的意思是，如果用户调用它，我想阻止该按钮以防止用户再次单击并再次调用此函数。

这是发送邮件的路由

routes.get('/sendMail', (req, res)=>{     
    db.find({ subscribed: true}, (err, result) => { 

        if(err){
            throw err;
       }else{                 
            result.forEach(function(subscriber, index){                                
                setTimeout(function() {
                    sendMail(subscriber);                    
                }, 3000*index) 

            });
            res.render('records.ejs', {root: '.'}); 
        }
    });
});

一旦js是单线程的，假设我调用了两次sendMail，这个函数应该在当前执行完成后才再次执行吗？

如果这是一个新手问题，我很抱歉。欢迎任何博客文章、教程等。

Answer 1

I'd like to block the button to prevent that the user click again and call this function again.

经常使用的一种非常简单的方法是在单击按钮后将其禁用。这是一个例子:

// Get button reference and set up click handler
document.querySelector("button").addEventListener("click", function(){
  // Here's where you'd call your sendMail function
  // sendMail();
  console.log("send mail has been called");
  
  // Then disable the button:
  this.disabled = true;
});

<button>Click Me</button>

另一个更可靠的解决方案是在调用事件处理程序后将其删除。您仍然希望禁用该按钮以获得更好的用户体验。

// Get button reference and set up click handler
document.querySelector("button").addEventListener("click", handleButtonClick);

function handleButtonClick(){
  // Here's where you'd call your sendMail function
  // sendMail();
  console.log("send mail has been called");
  
  // Then remove the handler and disable the button
  this.removeEventListener("click", handleButtonClick);
  this.disabled = true;
}

<button>Click Me</button>