Javascript SetTimeout导致提交的数据重复

我一直在玩一个玩具NoteApp，学习更多关于JS的知识。遇到一个我似乎无法解决的问题。我有一个setTimeout来添加/删除类，但由于添加了它，所以在添加新注释时会提交重复的类

查看画笔时更容易看到：-在提交一件东西时效果很好，但在添加另一件东西后，它会重复

我不确定是超时还是循环，但它是在添加超时后发生的，所以

代码如下：

var noteApp = {
        init: function() {
            if (this.hasStorage) {
                this.elements().events();
                storedNotes = [];
                storedNotes = JSON.parse(localStorage["notes"]);
                this.showNotes(storedNotes); 
            }
        },
        elements: function() {
            this.input  = $('#input');
            this.submit = $('#submit');
            this.list   = $('#list');
            this.del = $('.del');
            return this; 
        },
        events: function() {
            var self = this;

            this.submit.on('click', function(){
                self.addNote();
                self.init();
            });
            this.del.on({
                click: function(){
                  self.delNote($(this).parent());
                },
                mouseenter: function() {
                $(this).parent().addClass('to-del');
                },
                mouseleave: function() {
                $(this).parent().removeClass('to-del')
                }
            });
        },
        hasStorage: (function() {
            return typeof(Storage) !== "undefined"; 
        })(),
        addNote: function() {
            var self = this;
            if (this.input.val() === "" || this.input.val() === " " ) {
              this.input.addClass('shake');
              setTimeout(function () {
                  self.input.removeClass('shake');
              }, 500);
              return false;
            } else {
              this.saveNote(this.input.val());
              this.list.append('<li>' + this.input.val() + '<span class="del">×</span></li>');
              this.clearField(); 
            }
        },
        clearField: function() {
          var self = this;
          this.input.addClass('added');
          setTimeout(function () {
            self.input.removeClass('added');
            self.input.val('');
          }, 400);
        },
        delNote : function(note) {
            note.children('span').remove();
            var noteText = note.text();
            for (var i = storedNotes.length; i > -1; i--) {
                if (storedNotes[i] == noteText) {
                  storedNotes.splice(i, 1);
                  localStorage["notes"] = JSON.stringify(storedNotes);
                }
            }
            note.addClass('removing').fadeOut(100, function(){
            $(this).css({
                "visibility":"hidden", 
                'display':'block'
              }).slideUp(100, function(){
                $(this).remove();
                noteApp.checkEmpty();
              });
            });
        },
        saveNote : function(note) { 
            if (storedNotes.length > 0) {
              storedNotes[storedNotes.length] = note;
            } else {
              storedNotes[0] = note; 
            }
            localStorage["notes"] = JSON.stringify(storedNotes); 
            this.checkEmpty();
        },
        showNotes : function() {
            this.list.empty();
            for (var i = 0; i < storedNotes.length; i++) {  
              this.list.append('<li>' + storedNotes[i] + '<span class="del">×</span></li>');
            }
            this.elements().events();
            this.checkEmpty();
        },
        checkEmpty : function() {
          if (!this.list.children('li').length) {
              this.list.addClass('empty');
            } else {
              this.list.removeClass('empty');
            }
        }
    }

    $(function() { 
      noteApp.init();  
    });

var noteApp={
init:function（）{
如果（这是hasStorage）{
this.elements（）.events（）；
storedNotes=[]；
storedNotes=JSON.parse（localStorage[“notes”]）；
这是showNotes（storedNotes）；
}
},
元素：函数（）{
this.input=$（'#input'）；
this.submit=$（'#submit'）；
this.list=$（“#list”）；
this.del=$（'.del'）；
归还这个；
},
事件：函数（）{
var self=这个；
this.submit.on（'click'，function（））{
self.addNote（）；
self.init（）；
});
这是德隆({
单击：函数（）{
self.delNote（$（this.parent（））；
},
mouseenter:function（）{
$（this.parent（）.addClass（'to-del'）；
},
mouseleave:function（）{
$（this.parent（）.removeClass（'to-del'））
}
});
},
hasStorage:（函数（）{
返回类型（存储）！=“未定义”；
})(),
addNote:function（）{
var self=这个；
if（this.input.val（）==“”| | this.input.val（）==“”）{
this.input.addClass（'shake'）；
setTimeout（函数（）{
self.input.removeClass（'shake'）；
}, 500);
返回false；
}否则{
this.saveNote（this.input.val（））；
this.list.append（“
”+this.input.val（）+”×
”）；
这个.clearField（）；
}
},
clearField:function（）{
var self=这个；
this.input.addClass（'added'）；
setTimeout（函数（）{
self.input.removeClass（'added'）；
self.input.val（“”）；
}, 400);
},
delNote：功能（注）{
注.children（'span'）.remove（）；
var noteText=note.text（）；
对于（变量i=storedNotes.length；i>-1；i--）{
if（storedNotes[i]==noteText）{
存储节点拼接（i，1）；
localStorage[“notes”]=JSON.stringify（storedNotes）；
}
}
注释.addClass（'removing'）.fadeOut（100，function（）{
$（this.css）({
“可见性”：“隐藏”，
“显示”：“块”
}).slideUp（100，函数（）{
$（this.remove（）；
noteApp.checkEmpty（）；
});
});
},
saveNote:函数（注意）{
如果（storedNotes.length>0）{
storedNotes[storedNotes.length]=注释；
}否则{
storedNotes[0]=票据；
}
localStorage[“notes”]=JSON.stringify（storedNotes）；
这个。checkEmpty（）；
},
showNotes:function（）{
this.list.empty（）；
对于（var i=0；i'+storedNotes[i]+'×'）；
}
this.elements（）.events（）；
这个。checkEmpty（）；
},
checkEmpty:function（）{
if（！this.list.children（'li'）.length）{
this.list.addClass（'empty'）；
}否则{
this.list.removeClass（'empty'）；
}
}
}
$（函数（）{
noteApp.init（）；
});

---

我知道有些代码可能做得不是很好，我正在学习，任何额外的指针都很感激。谢谢

setTimeut

不是问题。问题来自每个注释之后的初始化应用程序

改进的活动授权

events: function() {
    var self = this;

    this.submit.on('click', function(){
        self.addNote();
    });

    this.list.on('click', '.del', function() {
        self.delNote($(this).parent());
    }).on('mouseenter', '.del', function() {
        $(this).parent().addClass('to-del');
    }).on('mouseleave', '.del', function() {
        $(this).parent().removeClass('to-del')
    });

}

---

另一个注意事项–

init（）

和

showNotes

绑定事件-单击一次即可触发多个操作，数量与侦听itAh的事件数量相同，现在已修复，谢谢！我知道设置事件的不同方法，可选的第二个属性，但不知道为什么一个会使用它而不是另一个更简单的方法。虽然它修复了它，但我不太清楚为什么它仍然…实际上它仍然没有完全修复它，它有时会放入两个注释，无法准确地找出原因和时间，但它确实修复了…我的错，错过了被注释掉的电话：）再次感谢！