CODEWITHSUNDEEP
javascriptjquery
user3379926
user3379926

Reputation: 3945

clearInterval not working as I expect it too

I made a demo which is here. All you have to do is start typing in the text field, make sure you have the console open. So as you type, you'll instantly see the OMG Saved, and the counter in the console will go nuts.

Now click the button, watching the console you should see something like 11 or some other value, but you'll also see the counter reset and continues going. I do not want this. I want the counter to stop, I have clicked a button and while the page hasn't refreshed, the counter should stop if I understand these docs on setInterval().

the app I am developing which uses code very similar to this, does not refresh as most single page apps don't. So it is imperative that I have control over this setInterval.

So my question is:

How do I reset the counter such that, until I type again in the input box OR if the input box element cannot be found the flash message does not show up, the interval is set back to 0.

update

The following is the JavaScript code, which is run on the link provided above.

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

Upvotes: 0

Views: 156

Answers (2)

Stevo Perisic
Stevo Perisic

Reputation: 353

What you need to do is use a timeout instead of an interval, like this:

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

Upvotes: -1

Pablo Matias Gomez
Pablo Matias Gomez

Reputation: 6823

You have to put this

clearInterval(SomeOtherClass.autoSave);

before this line: 

SomeOtherClass.autoSave = setInterval( function(){

So that you kill the previous interval and you ahve ONLY ONE interval at the same time

Your code will be:

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

Upvotes: 2

Related Questions