Javascript - Possible to check if an interval is already set? - javascript

I have a div that is bouncing every 5 seconds using an interval.
When scrolling to the bottom of the page, this div fades out and the interval is cleared.
However, I think there is an issue with the interval being created multiple times and overlaps upon itself.
Is there a way to check if an interval is set, and if so clear it, and if not, to set it?
The reason I need to clear the interval is because the bounce effect of jquery causes the div to appear again even if it's hidden.
JSBIN: http://jsbin.com/ijuhok/4/

Seems that you set the interval whenever it is scrolled. So if I scroll down, and then scroll down again you set it twice.
Just clear it before hand every time you set it and you should be ok.
http://jsbin.com/ijuhok/6

You need to overwrite the existing interval so that you can clear it from everywhere: http://jsbin.com/ijuhok/5/.
$j("#more").fadeIn('slow',function(){
ResInterval = window.setInterval(bounceMore, 5000);
// no "var"
});
You can eliminate $(document).ready for window because it's always available.

Your issue is that you're defining ResInterval in a local scope, because you've used var:
$j("#more").fadeIn('slow',function(){
var ResInterval = window.setInterval('bounceMore()', 5000);
});
Remove the var prefix, and your code will work as expected: Currently, ResInterval is a local varibale of the callback function in fadeIn. When var is omitted, the interval will be assigned to the closest ResInterval declaration (using var).

I did this like below, My problem was solved. you should set the value like "false", when you clearTimeout the timer.
var timeer=false;
----
----
if(timeer==false)
{
starttimer();
}
-----
-----
function starttimer()
{
timeer=setInterval(activefunction, 1000);
}
function pausetimer()
{
clearTimeout(timeer);
timeer=false;
}

Related

Overriding javascript function on different page

This is new to me, and I don't know how to handle it.
The page has a logo that uses transitions to change its size and color and is triggered by this on the bottom of the HTML:
document.onload="initialize()"
setInterval(function(){
setTimeout(function(){
$('#path1').css('transform','scale(.95)');
$('#path2').css('transform','scale(.95)');
$('#path2').css('fill','#F7A700');
}, 2000);
$('#path1').css('transform','scale(1.05)');
$('#path2').css('transform','scale(1.00)');
$('#path2').css('fill','#FFCF55');
}, 4000);
This starts the transition and changes the color of the svg path in coordination. On a separate script page there is a function that determines the current page slider and I need to change the css fill on #path2 for a specific page. I've tried if...else statements, moving the setInterval() function to the same page, etc, but nothing is letting me override the fill color in the setInterval() function.
REVISION: Its included in the html and there is a separate js page with all of the other functions. So I thought maybe it had something to do with that but now I'm understanding it is running on an infinite loop so any changes I try to make are going to be overridden. Its a logo that is a svg with multiple paths and on the homepage slide one path needs to be white and everything else stay the same for all other pages slides. There is only one page of html and the content slides on a slider. Not sure if I explained it any better. I'm working with existing code done by someone else so I'm trying to work with what I've been given but maybe there is a better solution to run this? maybe through css? I need it to load on window or document load and run infinitely but need to be able to modify the css on it. I have to use css transforms to set it up.
The interval is setup to run forever. If you set the color from another script, the interval will just overwrite the color the next time the interval runs. One option is to stop the interval when setting the color from the other script. You would need a variable to hold the interval id.
var timer = null;
You would need to save the interval id when starting the interval.
timer = setInterval(function(){
setTimeout(function(){
$('#path1').css('transform','scale(.75)');
$('#path2').css('transform','scale(.75)');
$('#path2').css('fill','#F7A700');
}, 2000);
$('#path1').css('transform','scale(1.50)');
$('#path2').css('transform','scale(1.50)');
$('#path2').css('fill','#FFCF55');
}, 4000);
In your other script, stop the interval when setting the color.
if (timer) {
clearInterval(timer);
timer = null;
}
$('#path2').css('fill','#00FF00');
Edit:
Another possible option is to use boolean flags to stop parts of the animation. This would allow you to stop the fill animation but continue with the reest of the animation. You would need a boolean flag to indicate whether or not the fill should be animated. Initialize the flag to true.
var animateFill = true;
Use the flag to determine if interval should animate the fill attribute.
setInterval(function(){
setTimeout(function(){
$('#path1').css('transform','scale(.75)');
$('#path2').css('transform','scale(.75)');
if (animateFill){
$('#path2').css('fill','#F7A700');
}
}, 2000);
$('#path1').css('transform','scale(1.50)');
$('#path2').css('transform','scale(1.50)');
if (animateFill) {
$('#path2').css('fill','#FFCF55');
}
}, 4000);
In your other script, set the flag to false when setting the fill color.
animateFill = false;
$('#path2').css('fill','#00FF00');
If you later need to restart the animation of the fill color then set the flag back to true.
animateFill = true;

carousel setInterval autoplay not working

the code: http://jsfiddle.net/n2m4absf/ (wont be functional, this is linked for code display purposes). trying to use:
setInterval(function(){slideCard();}
, 5000);
this carousel is a div box that moves in -883px chunks of margin-left. i want it to scroll automatically (thinking set interval would be the logic to use) every 5 seconds or so.
i have other js that handles the on click functions for navigating the carousel manually, but i dont think they should be effecting the autoplay. they do however live in the same file as the above js.
just need to get autoplay working and not sure why my js isnt doing it.
There are multiple problems in the script.
The variable count is declared as local to the method so in every call it will get initiated to 0 causing the first if block to execute.
Since you have used different if blocks, each if blocks will get evaluated in each iteration, so only the value of the last block will be affected
Since you don't have a constant logic for the margin value, I think you can use an array of margin values like
var slide = $('div.inner > ul');
var count = 0,
margins = ['-883px', '-1686px', 0];
function slideCard() {
slide.css('margin-left', margins[count++ % 3]);
};
setInterval(function () {
slideCard();
}, 1000);

Set width and height of a DIV based on another div

How do I set width and height of a DIV based on another div?
This is how I've done it but it works only when the alert is present??
var readyC = setInterval(function() {
if (Condition) {
$('#divAA').width($('#divBB').width()).height($('#divBB').height());
//alert($('#divBB').width()) // works when this is uncommented??
}
clearInterval(readyC);
}, 10);
EDIT:
Fixed typo:
$('#divBB'+i) to $('#divBB')
The reason why you're getting it only when you keep an alert is, you're using setInterval with such small interval of 10ms.
When you use alert, the execution is stopped and that's why you see the div resized. You must increase the interval to a higher value.
Also clearInterval is not inside else block, So it means what the timer will clear on first attempt itself. In that case you don't need a setInterval at all.
Update based on comments
As you're looping through a list of divs to update the height of other divs, you must use self invoking function to bind the value of i correctly.
If the content of your divs are loaded dynamically, then you will need to use window.load event to get its correct height as discussed here: https://stackoverflow.com/a/13071846/1845408
$(window).load(function() {
$('#divAA').width($('#divBB').width()).height($('#divBB').height());
});

How to use javascript to monitor a change in a div value?

I have a page with a countdown in a DIV with id ="count"
I would like to monitor this div value so, when it reaches 0, a alert pops up.
I've gono so far as
if(parseInt(document.getElementById('count').innerHTML) < 2){}
But I don't know how to "listen" for the div changes
Can anyone help me?
Btw: it needs to be in pure javascript, with no such things as jquery.
Update:
I have no say so in the original code. It's an external page and I'm trying to run this code at the address bar
Presumably you have a function running based on setInterval or setTimeout. Have that function call your function when it gets to zero.
If you can't do that, you can try optimised polling - use setInterval to read the value, estimate when it might be near zero, check again and estimate when it might be zero, etc. When it is zero, do your thing.
There are DOM mutation events, but they are deprecated and were never well or widely supported anyway. Also, they are called when content changes so probably too often for your scenario anyway.
If you are changing the value of #count yourself then call the alert from that place. If not use:
window.setInterval(function(){
if(parseInt(document.getElementById('count').innerHTML) < 2) alert('Alarm!');
},1000); // 1s interval
UPDATE
To clear that interval:
var timer = window.setInterval(function(){
if(parseInt(document.getElementById('count').innerHTML) < 2) {
alert('Alarm!');
window.clearInterval(timer);
}
},1000); // 1s interval
//or by using non-anonymous function
function check(){
if(parseInt(document.getElementById('count').innerHTML) < 2) {
alert('Alarm!');
window.clearInterval(timer);
}
}
var timer = window.setInterval(check,1000);
The only efficient way to monitor this is to go to the code that is actually changing the div and modify it or hook it to call a function of yours whenever it updates the contents of the div. There is no universal notification mechanism for anytime the contents of div changes. You will have much more success looking into modifying the source of the change.
The only option I know of besides the source of the change would be using an interval timer to "poll" the contents of the div to notice when it has changed. But, this is enormously inefficient and will always have some of inherent delay in noticing the actual change. It's also bad for battery life (laptops or smartphones) as it runs continuously.
You don't listen for the div to change. The div is just there for a visual representation of the program's state.
Instead, inside whatever timing event is counting down the number, use a condition such as...
if (i < 2) {
// ...
}

Javascript / jQuery flick between two images

I'm struggling with the timer part. I can replace one image with another easily with javascript by calling the function. What I want to be able to do is set a timer to sit and change the images at a specific interval (say 1 second).
I've used jQuery to refresh an image every second before, but when I try and add a function inside to change the image, it just hangs.
you can use setinterval function of javascript:
setInterval(function,time); //ex: setInterval(myfunction,1000)
setInterval will also return a pointer to time which can be used later on to clearInterval
var interval = setInterval(myfunction,1000);
later you can use:
clearInterval(interval)

Categories

Resources