javascript - clearInterval 也没有像我期望的那样工作

Question

我做了一个演示which is here 。您所要做的就是开始在文本字段中输入内容，确保控制台已打开。因此，当您键入时，您会立即看到 OMG Saved，并且控制台中的计数器会变得疯狂。

现在单击按钮，观察控制台，您应该看到类似 11 的内容或其他值，但您还会看到计数器重置并继续运行。我不想要这个。我希望计数器停止，我单击了一个按钮，虽然页面尚未刷新，但如果我理解 these docs on setInterval() ，计数器应该停止.

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

所以我的问题是:

如何重置计数器，以便在我再次在输入框中键入内容或如果找不到输入框元素时不会显示 Flash 消息，则间隔将设置回 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();