clearInterval не работает, как я этого ожидал

Question

Я сделал демо which is here. Все, что вам нужно сделать, это начать вводить текст в текстовое поле, убедитесь, что консоль открыта. Так как вы печатаете, вы сразу увидите OMG Saved, и счетчик в консоли будет гаснуть.

Теперь нажмите кнопку, наблюдая за консолью, вы увидите что-то вроде 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(){ 

Так что вы убиваете предыдущий интервал и вы ahve ТОЛЬКО ОДИН интервал в то же время

Ваш код будет:

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