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不是问题。问题来自每个笔记后的初始化应用程序。

改进的事件委托

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

SetTimeout导致提交的数据重复

1 个答案: