Develop Reference

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

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

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

Clearing an interval that was set before [duplicate]

This question already has answers here:
How can I use setInterval and clearInterval?
(5 answers)
Closed 8 years ago.
http://jsfiddle.net/x5MY8/2/
HTML
<div id="easy">easy</div>
<div id="hard">hard</div>
JS
function test(mode) {
var asd = this;
this.mode = mode;
setInterval(function () {
alert(asd.mode);
}, 1000);
}
$(document).ready(function () {
$('#easy').on('click', function () {
var stuff = new test('easy');
});
$('#hard').on('click', function () {
var stuff = new test('hard');
});
});
Upon pressing the easy button, an event launches that alerts easy every second. If I press hard afterwards, it will start another event, and it will alert easy, hard, easy, hard.., but I want it to alert only what was pressed at the moment, so I have to clear the previous interval somehow. How can I do that? Somehow, I need to call clearInterval when a button is pressed on the other object, but I don't really know how to.

http://jsfiddle.net/x5MY8/3/
You need to store and clear the interval like so
var interval;
function test(mode) {
var asd = this;
this.mode = mode;
if (interval) {
clearInterval(interval);
}
interval = setInterval(function () {
alert(asd.mode);
}, 1000);
}

Store it in a variable:
var interval = setInterval(function(){
//your code
},1000);
Now, you can clear using clearInterval:
clearInterval(interval);

clear the value when every clicked
var clear=0;
function test(mode) {
var asd = this;
this.mode = mode;
clear=setInterval(function () {
alert(asd.mode);
}, 1000);
}
$(document).ready(function () {
$('#easy').on('click', function () {
clearInterval(clear);
var stuff = new test('easy');
});
$('#hard').on('click', function () {
clearInterval(clear);
var stuff = new test('hard');
});
});

reset javascript timer on click

I have this javascript code:
var logout_warning = 6000;
$(document).ready(function () {
window.setTimeout(function () {
$('#logout_warning').reveal();
}, logout_warning)
});
$(document).ready(function () {
window.setTimeout(function () {
alert("logout");
//location.href = "/login/logout.php?url=/index.php?r=inactivity";
}, logout_warning*2)
});
that displays a warning after 6000ms then redirects to a URL to logout a user after 12000ms
I have this a href link:
Stay Logged In
which i want to reset the time on click to stop the user from being logged out, i created this function but im not sure what to put inside it
function ResetLogoutTimer() {
}

try this:
var log_outer = window.setTimeout(function () {
alert("logout");
//location.href = "/login/logout.php?url=/index.php?r=inactivity";
}, logout_warning*2)
function ResetLogoutTimer() {
window.clearTimeout(log_outer);
}

Sorry for poor English, its my second language.
You should try:
var timeoutID = window.setTimeout(function () {
$('#logout_warning').reveal();
}, logout_warning)
and than
function ResetLogoutTimer() {
window.clearTimeout(timeoutID);
}
The docs for it https://developer.mozilla.org/en-US/docs/Web/API/Window.setTimeout
One last thing, do not use w3c schools for learning javascript (the docs are not complete , instead use mdn site https://developer.mozilla.org/pl/docs/JavaScript

How Can I Pre-Load Images So That My Non-Plug-In Slide-Show Timing Is Not Thrown Off In My ASP.NET Web-Pages Site?

Firstly, I have been researching this for a while, but I feel like this problem is a little beyond my abilities to solve on my own. Or at least, beyond my experience at this point, as I have never done this before.
I have a <div> that contains an <img> tag which I use JavaScript to change the source of to create a simple slideshow.
The Simple HTML:
<div id="slideShowWrapper">
<img id="slideShowImage" src="~/Images/City_Images/Okmulgee_Clock_2.jpg" alt="Okmulgee Clock" title="Slide Show Paused" />
</div>
The problem I am having is that when a user visits the site for the first time, the images take too long to load during their first pass through the slideshow, and it throws of the timing of the slideshow. Once the browser has the images cached, it works fine. If there were a way to load all of the pictures before the slideshow starts I believe it would fix the problem. During testing, this problem never arose because the images were already cached by my browser so no excessive loading time was needed.
Here is the JavaScript (jQuery) I use for the slide-show. The images originally come from a server-side database so I use AJAX to get the file name values I need (currently there are only 14 entries/pictures in the database, but this number could increase or decrease as site admins will be able to edit the pictures in the slideshow through a partial CMS). To explain some of the code, this slide-show has the functionality to pause on mouse-over and resume on mouse-out.
jQuery(function ($) {
//Slideshow functionality
var paths = new Array();
var timer = new Array();
var pathsString = "";
var i = 1;
var panel = $("img#slideShowImage");
var fTimer;
var tTimer;
var t2Timer;
var fadingOut = false;
var slideShowOn = false;
var showTimer;
$.ajax({
url: "/AJAX Pages/Compute_Slide_Show.cshtml",
async: false,
type: "GET",
success: function (response) {
paths = response.split("/*\\");
},
error: function (jqXHR, textStatus, error) {
paths[0] = "Okmulgee_Clock_2.jpg";
}
});
if (paths.length > 0) {
panel.attr("src", "/Images/SlideShowPics/" + paths[0])
if (paths.length > 1) {
swapImage();
}
}
else {
panel.attr("src", "/Images/City_Images/Okmulgee_Clock_2.jpg");
}
panel.mouseout(function () {
if (paths.length > 1) {
runSlideShow();
}
});
panel.mouseover(function () {
if (paths.length > 1) {
stopSlideShow();
}
});
function runSlideShow() { //Calls the swapImage function to begin or resume the slide show
if (slideShowOn == false) {
slideShowOn = true;
if (fadingOut == false) {
clearTimeouts();
}
showTimer = setTimeout(swapImage, 1552);
}
};
function stopSlideShow() { //Pauses the slide show
clearTimeout(showTimer);
if (fadingOut == true) {
fTimer = setTimeout(clearTimeouts, 1551);
}
else if (fadingOut == false) {
clearTimeout(tTimer);
clearTimeouts();
}
slideShowOn = false;
};
function swapImage() { //Fades out the slideshow image
tTimer = setTimeout(function () { fadingOut = true }, 4549);
timer[0] = setTimeout(function () { panel.css('opacity', '0.9') }, 4550);
timer[2] = setTimeout(function () { panel.css('opacity', '0.8') }, 4600);
timer[4] = setTimeout(function () { panel.css('opacity', '0.7') }, 4650);
timer[6] = setTimeout(function () { panel.css('opacity', '0.6') }, 4700);
timer[8] = setTimeout(function () { panel.css('opacity', '0.5') }, 4750);
timer[10] = setTimeout(function () { panel.css('opacity', '0.4') }, 4800);
timer[12] = setTimeout(function () { panel.css('opacity', '0.3') }, 4850);
timer[14] = setTimeout(function () { panel.css('opacity', '0.2') }, 4900);
timer[16] = setTimeout(function () { panel.css('opacity', '0.1') }, 4950);
timer[18] = setTimeout(function () { panel.css('opacity', '0') }, 5000);
timer[20] = setTimeout(swapImage2, 5050);
}
function swapImage2() { //Changes and fades in the slideshow image
panel.attr("src", "/Images/SlideShowPics/" + paths[i]);
if (i < paths.length - 1) {
i++;
}
else {
i = 0;
}
timer[21] = setTimeout(function () { panel.css('opacity', '0.1') }, 550);
timer[23] = setTimeout(function () { panel.css('opacity', '0.2') }, 600);
timer[25] = setTimeout(function () { panel.css('opacity', '0.3') }, 650);
timer[27] = setTimeout(function () { panel.css('opacity', '0.4') }, 700);
timer[29] = setTimeout(function () { panel.css('opacity', '0.5') }, 750);
timer[31] = setTimeout(function () { panel.css('opacity', '0.6') }, 800);
timer[33] = setTimeout(function () { panel.css('opacity', '0.7') }, 850);
timer[35] = setTimeout(function () { panel.css('opacity', '0.8') }, 900);
timer[37] = setTimeout(function () { panel.css('opacity', '0.9') }, 950);
timer[39] = setTimeout(function () { panel.css('opacity', '1') }, 1000);
t2Timer = setTimeout(function () { fadingOut = false }, 1050);
timer[41] = setTimeout(swapImage, 1050);
}
function clearTimeouts() { //Clears all slide show timers
for (key in timer) {
clearTimeout(timer[key]);
}
}
});
I tried reading up on this myself, but I am not getting answers that I feel I can adapt to my code. Either that or the solution is above my head.
SO sites I read up on:
Slideshow starts while images are loading but first image isn't displayed until all are downloaded
loading all images before slideshow
If you want to check out the problem yourself, you should be able to get there by visiting this link: http://test.cityofokmulgee.org:54543
Remember that this error is probably only going to naturally show up the first time you load up the page. After that your browser will have cached the images and the load time won't throw off the timing of the slide-show (unless you clear the images from the browser cache, something I have been unsuccessful in doing, myself). Also, I'm not sure if this issue will even show up in Chrome, but I know it does in IE.
Any help is much appreciated, as this is the major bug disallowing this site to go live, and I have never done anything like pre-loading images before, so I don't have any idea where to start.
Additional Info That Might Be Useful:
The contents of the server-side file, Compute_Slide_Show.cshtml (written in C#):
#{
Layout = "";
string fileNames = "";
if(IsAjax)
{
var db = Database.Open("Content");
bool firstRun = true;
foreach (var row in db.Query("SELECT FileOrder, FileName FROM SlideShow WHERE FileName IS NOT NULL AND FileName <> '' ORDER BY FileOrder ASC"))
{
if (firstRun == true)
{
firstRun = false;
fileNames += row.FileName;
}
else
{
fileNames += "/*\\";
fileNames += row.FileName;
}
}
}
else
{
Context.RedirectLocal("~/home.cshtml");
}
#:#fileNames
}

Oh dear, I see a lot of weird stuff in there!
First idea: do you really need to create your own slideshow? In your case I'd rather create the markup with jQuery/AJAX and apply an existing slider, like flexslider, to your images. Why dont you do that?
The second thing, just for the sake of it, is how you solved that opacity dimming. In jQuery, you can easily animate an element via .animate() (which expects a css map) or just use fade(), like so:
function swapImage() { //Fades out the slideshow image
tTimer = setTimeout(function () { fadingOut = true;
panel.stop().fadeTo(500, 0, function() {
// callback after the element has been faded
swapImage2();
});
}, 4549);
}
just besides: setting the opacity via css istn crossbrowser anyways.
To get to your loading thingy, there are several ways how to do this, my advice would be to append an image for each key in paths in a hidden div:
for (var i = 0; i < paths.length; i++) {
$('.hidden').append('<img src="' + paths[i] + '" />');
}
var checkforloaded = setInterval(function() {
var _loaded = 0;
for (var i = 0; i < paths.length; i++) {
var image = $('.hidden').children().eq(i).get(0);
if (image.complete || image.readyState == 'complete' || image.readyState == 4) {
_loaded++;
}
}
if (_loaded === paths.length) {
clearInterval(checkforloaded);
// start the slider
}
}, 80);

chrome ext: limiting DOMNodeInserted

I'm developing a chrome plugin that inject a class to every element in the page. But in pages such as facebook or twitter there is content loaded dynamically, so I use this code to check when this conent is loaded:
document.addEventListener('DOMNodeInserted', function() {
console.log('fatto');
}, true);
the problem is that this way, the script is fired every single time a node is inserted. Therefore I'd like to add some kind of limitation. something like: When a node is inserted fire the script and then wait 2 sec.
I'm trying something like this but no success:
var check = 1;
document.addEventListener('DOMNodeInserted', function() {
if(check == 1) {
check = 0;
setInterval( function() {
//do stuff
check = 1;
}, 1000);
console.log('fatto');
}
}, true);
thanks

I've seen this technique referred to as debouncing. Here's an example:
(function() {
var timer;
var doStuff = function() {
timer = null;
alert("Doing stuff");
};
document.addEventListener('DOMNodeInserted', function() {
if (timer) {
window.clearTimeout(timer);
}
timer = window.setTimeout(doStuff, 2000);
}, false);
})();
You can generalize this:
function addDebouncedEventListener(obj, eventType, listener, delay) {
var timer;
obj.addEventListener(eventType, function(evt) {
if (timer) {
window.clearTimeout(timer);
}
timer = window.setTimeout(function() {
timer = null;
listener.call(obj, evt);
}, delay);
}, false);
}
addDebouncedEventListener(document, 'DOMNodeInserted', function(evt) {
alert(evt.target.nodeName + " inserted");
}, 2000);

I'd say:
var timeout;
document.addEventListener('DOMNodeInserted', function() {
startNewTimeout();
}, true);
function startNewTimeout() {
//only if there is no active timeout already
if(timeout === undefined) {
timeout = setTimeout( function() {
timeout = undefined;
//do stuff
}, 1000);
}
}
​This script won't delay the execution of //do stuff indefinitely. It will make sure that //do stuff is executed max. 1sec after first DOMNodeInserted event.