更新

Question

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

现在点击按钮，观看控制台，您应该会看到11或其他值，但您还会看到计数器重置，继续。我不想要这个。我希望计数器停止，我点击了一个按钮，当页面没有刷新时，如果我理解these docs on 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();

clearInterval不能像我期望的那样工作

更新

2 个答案: