javascript - 如何停止函数被多次调用

Question

我不明白为什么我的代码会触发一个函数的多次调用。我正在创建一个日历应用程序，每次我删除一个事件时，它都会增加函数被调用的次数。这一定与我尝试使用'break'解决但不起作用的for循环有关。

当用户在日历中打开一天时，它会显示事件。我有一个事件侦听器来触发“您确定要删除事件吗？”的模式。

// Delete event
delEvent = document.getElementsByClassName('eventEntry');
for (var e = 0; e < delEvent.length; e++) {
    delEvent[e].addEventListener('click', delete_event,false);
    break;
}
// Opens model to prompt event delete
function delete_event(d){
    id = d.currentTarget.id;
    $('#modal-delete').modal('open');
    delModalBtn = document.getElementsByClassName('delTrue');
    for (var i = 0; i < delModalBtn.length; i++) {
        delModalBtn[i].addEventListener('click', event_del_true,false);
        break;
    }
}

当用户确认他们想要删除事件时，会调用event_del_true函数（代码如下）。这在技术上是可行的，但 MaterializeCSS 中的 Toast 弹出组件会显示多次。

例如：

• 删除 1 个事件 = 事件被删除并显示弹出窗口。

• 删除第二个事件 = 事件被删除但弹出窗口显示两次，因此循环开始

   function event_del_true(){
   $.ajax({
       type: "POST",
       url: "php/delete-event.php",
       data: {id: id}
   }).done(function() {
       M.toast({
           html: 'Event deleted',
           classes: 'rounded',
           displayLength: 2000,
           inDuration: 375,
           outDuration: 300
       });
   });
  

任何帮助将不胜感激，亲切的问候。

标签： javascriptjquery

Answer 1

如果在第一次迭代中中断循环，为什么需要在此处添加循环？

for (var i = 0; i < delModalBtn.length; i++) {
    delModalBtn[i].addEventListener('click', event_del_true,false);
    break;
}

另外，每次触发函数时，都会向按钮添加另一个事件侦听器，因此event_del_true每次调用时效果都会叠加在一起delete_event

一个简单的解决方法是将这条线移出函数

// Opens model to prompt event delete
function delete_event(d){
    id = d.currentTarget.id;
    $('#modal-delete').modal('open');
}

// add the event to every button with the class ONCE only
delModalBtn = document.getElementsByClassName('delTrue');
for (var i = 0; i < delModalBtn.length; i++) {
    delModalBtn[i].addEventListener('click', event_del_true,false);
}