clearInterval也没有像我预期的那样工作

Question

我制作了一个演示就在这里。您所要做的就是开始输入文本字段，确保您打开了控制台。因此，当您输入时，您将立即看到保存的OMG，控制台中的计数器将发疯。

现在单击该按钮，查看控制台，您将看到类似于11或其他值的东西，但您也会看到计数器重置，继续运行。我不想这样。我想让计数器停止，我已经点击了一个按钮，当页面没有刷新时，如果我理解setInterval()，计数器应该停止。

我正在开发的应用程序使用与此非常相似的代码，它不会像大多数单页应用程序那样刷新，所以我必须控制这个setInterval。

所以我的问题是：

如何重置计数器，直到我再次键入输入框或如果找不到输入框元素，闪存消息就不会显示，间隔将设置为0.。

更新

下面是在上面提供的链接上运行的JavaScript代码。

var ObjectClass = {
  
  initialize: function() {
    $('#flash-message').hide();
  },
  
  syncSave: function() {
    $('#content').keypress(function(){
      SomeOtherClass.autoSave = setInterval( function(){
        $('#flash-message').show();
        $('#flash-message').delay(1000).fadeOut('slow');
      }, 500);
    });
  },
  
  listenForClick: function() {
    $('#click-me').click(function() {
      console.log(SomeOtherClass.autoSave);
      clearInterval(SomeOtherClass.autoSave);
    });
    
  }
};

var SomeOtherClass = {
  autoSave: null
};

ObjectClass.initialize();
ObjectClass.syncSave();
ObjectClass.listenForClick();

Answer 1

你得把这个

clearInterval(SomeOtherClass.autoSave); 

在这一行之前：

SomeOtherClass.autoSave = setInterval( function(){ 

这样，您就可以终止前一个间隔，同时只有一个时间间隔。

您的代码将是：

var ObjectClass = {

    initialize: function () {
        $('#flash-message').hide();
    },

    syncSave: function () {
        $('#content').keypress(function () {
            clearInterval(SomeOtherClass.autoSave);
            SomeOtherClass.autoSave = setInterval(function () {
                $('#flash-message').show();
                $('#flash-message').delay(1000).fadeOut('slow');
            }, 500);
        });
    },

    listenForClick: function () {
        $('#click-me').click(function () {
            console.log(SomeOtherClass.autoSave);
            clearInterval(SomeOtherClass.autoSave);
        });

    }
};

var SomeOtherClass = {
    autoSave: null
};

ObjectClass.initialize();
ObjectClass.syncSave();
ObjectClass.listenForClick();

Answer 2

您需要做的是使用超时而不是间隔，如下所示：

var ObjectClass = {

  initialize: function() {
    $('#flash-message').hide();
  },

  syncSave: function() {
    $('#content').keypress(function(){
      SomeOtherClass.autoSave = setTimeout( function(){
        $('#flash-message').show();
        $('#flash-message').delay(1000).fadeOut('slow');
      }, 500);
    });
  },

  listenForClick: function() {
    $('#click-me').click(function() {
      console.log(SomeOtherClass.autoSave);
      if(typeof SomeOtherClass.autoSave === 'number'){
        clearTimeout(SomeOtherClass.autoSave);
        SomeOtherClass.autoSave = 0;
      }
    });

  }
};

var SomeOtherClass = {
  autoSave: 0
};

ObjectClass.initialize();
ObjectClass.syncSave();
ObjectClass.listenForClick();