javascript - SetTimeout导致提交的数据重复

Question

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

查看笔时更容易看到:http://codepen.io/jhealey5/pen/KldjC - 提交一件事情时效果很好，但添加另一件事后它会重复。

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

代码如下:

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

我知道其中一些代码可能做得不太好，我正在学习，任何额外的指针都会受到赞赏。谢谢!

Answer 1

setTimeut 不是问题。问题来自于每个音符后的初始化应用程序。

改进的事件委托(delegate)

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

}

http://codepen.io/anon/pen/wobCj?editors=001