DIV should be refreshed only once - javascript

success: function (result) {
if (result == 1) {
var auto_refresh = setInterval(function () {
$('#myDiv').fadeOut('slow', function () {
$(this).load('/echo/json/', function () {
$(this).fadeIn('slow');
});
});
}, 1025544);
}
}
Friends on success function I have to refresh the myDiv DIV only once but as the above code the DIV is keep on fade out and fade in continuously instead it should work only once

setInterval() repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. It will continue to do so until clearInterval is called.
It is easiest just to use setTimeout(), which just delays the function being called for the specified time:
var auto_refresh = setTimeout(function() {
$('#myDiv').fadeOut('slow', function() {
$(this).load('/echo/json/', function() {
$(this).fadeIn('slow');
});
});
}, 1025544);

using a variable name auto_refresh kind of indicates you want it to repeat. also -> 1025544ms = 17mins. so it will refresh every 17 mins.
if you want it to not show, wait 17mins then show, use #Jacod Grays Answer.
if you just want it to show, remove the setInterval like so :-
success: function (result) {
if (result == 1) {
$('#myDiv').fadeOut('slow', function () {
$(this).load('/echo/json/', function () {
$(this).fadeIn('slow');
});
});
}
}

Related

setTimeout not working properly with ajaxStart

I want to delay the appearance of my loading gif during the execution of an ajax request so that it doesn't show up if the request doesn't last more than a second. Even though the gif shows up without adding a big delay, when I set the value more than 80 in the setTimout function, it just doesn't. What am I missing?
function ajaxLoading()
{
$(document).ajaxStart(function ()
{
ajaxLoadingTimeout = setTimeout(function () {
$('#loading').show();
}, 1000)
});
$(document).ajaxStop(function () {
clearTimeout(ajaxLoadingTimeout);
$('#loading').hide();
});
}
You can try this:
function ajaxLoading()
{
var flag=true;
$(document).ajaxStart(function ()
{
flag=true;
ajaxLoadingTimeout = setTimeout(function () {
if(flag){
$('#loading').show();
}
}, 1000)
});
$(document).ajaxStop(function () {
flag=false;
clearTimeout(ajaxLoadingTimeout);
$('#loading').hide();
});
}
Updated answer based on comment
function ajaxLoading()
{
$('document')
.ajaxStart(function(){
$("#loading").delay(1000).show();
})
.ajaxStop(function(){
$("#loading").hide();
$(this).unbind("ajaxStart");
});
}

Disable timer within setInterval function with dynamic parameters

I wanted to pass dynamic parameters into a setInterval function (see question here) and specifically #tvanfosson's comment.
But now, I also want to disable that timer if a certain condition is met. I tried to define the timer variable as a global variable but I still get the timer as a undefined on this line:
console.log('else. timer=' + timer);:
else. timer=undefined
<script language="javascript" type="text/javascript">
var timer;
var params={};
params.color='light';
$(document).ready(function () {
timer=createInterval(showSmallWidget, params.color, 500);
});
function createInterval(f, dynamicParameter, interval) {
setInterval(function () {
f(dynamicParameter);
}, interval);
}
function showSmallWidget(color) {
if ($('#widget').html() == '') {
//do stuff
}
else {
console.log('else. timer=' + timer);
if (timer) { console.log('CLEAR TIMER'); timer.clearInterval(); timer = null; }
}
}
</script>
I tried to create a JSFiddle, but I can't get it to work properly: https://jsfiddle.net/puhw3z2k/
There are a couple problems:
1) You have to return the timerID from your createInterval() function:
function createInterval(f, dynamicParameter, interval) {
return setInterval(function () {
f(dynamicParameter);
}, interval);
}
2) clearInterval() works like this clearInterval(timer), not timer.clearInterval().

Why doesn't the setInterval function stop?

I'm trying to clear the time interval which runs every 15 seconds.
Here is the ajax request:
function extras()
{
$x = {
action:'extras'
};
var r;
$.ajax({
type:'POST',
url:'services.php',
data:$x,
beforeSend:function() {
$('input[name="stop_"]').trigger("click");
},
success:function(response) {
r = response;
//console.log(response)
},
complete:function() {
console.log(r);
$('input[name="re_start"]').trigger("click");
}
});
}
So, in my buttons re_start and stop_ i have:
$('input[name="re_start"]').click(function (event) {
event.preventDefault();
clearInterval(check);
var check = setInterval(function() {
extras();
},15000);
console.log('Starting again...');
});
$('input[name="stop_"]').click(function (event) {
event.preventDefault();
clearInterval(check);
console.log('Stop');
});
In my DOM in jQuery I initialize the function extras() and keep it in a variable called "check" where I initialize the time interval as follows:
<input type="button" style="display:none;" name="re_start">
<input type="button" style="display:none;" name="stop_">
<script type="text/javascript">
(function() {
extras();
var check = setInterval(function() {
extras();
},15000);
})();
function extras()
{
$x = {
action:'extras'
};
var r;
$.ajax({
type:'POST',
url:'services.php',
data:$x,
beforeSend:function() {
$('input[name="stop_"]').trigger("click");
},
success:function(response) {
r = response;
//console.log(response)
},
complete:function() {
console.log(r);
//message_smart(r);
$('input[name="re_start"]').trigger("click");
}
});
}
</script>
Then I can not understand how it is possible that the first 30 seconds work and when they pass 60 seconds seem to start doing things twice at once, then three and so on! It seems like if I change the interval every second and will run faster and faster. What is the problem?
The problem is here:
(function() {
extras();
var check = setInterval(function() {
extras();
},15000);
})();
You are creating a variable check in a new function scope that is inaccessible outside of that scope. Microsoft has a good example of scope in javascript. Additionally you can see this question.
Now to solve your problem you need to put the check variable in the global scope so remove the function wrapper.
extras();
var check = setInterval(function() {
extras();
},15000);
You also need to change the restart handler to reassign the variable, like so:
$('input[name="re_start"]').click(function (event) {
event.preventDefault();
clearInterval(check);
check = setInterval(function() {
extras();
},15000);
console.log('Starting again...');
});
Now they should all be using the same check variable and work as expected when clearing the timeout.

Javascript function scope - to use console.log or not?

Two functions:
First: Closes a stickyFooter that is fixed to the bottom of the page onclick of the cross.
jQuery:
jQuery(document).ready(function() {
function closeSticky() {
jQuery('.stickyFooter').hide();
jQuery.cookie('stickyNewsClosed', 'yup', {
path: '/',
expires: 30
});
}
});
Second: This function fades in/fades out two divs, and stops when there's focus to an input area. What needs to happen now is when the stickyfooter is closed it needs to call the clearTimeout in this separate function:
jQuery(document).ready(function () {
// check if both divs are visible
if ((jQuery('.footerPromoBannerWrapper').is(':visible')) && (jQuery('.stickyFooter').is(':visible'))) {
// Local variable for cancel of fades
var stickyTimeout;
// Set sticky as display:none
jQuery('.stickyFooter').hide();
// Switch in
window.switchIn = function () {
jQuery('.footerPromoBannerWrapper').fadeToggle(function () {
jQuery('.stickyFooter').fadeToggle(function () {
stickyTimeout = setTimeout(function () {
window.switchOut();
}, 3000);
});
});
};
// Switch out
window.switchOut = function () {
jQuery('.stickyFooter').fadeToggle(function () {
jQuery('.footerPromoBannerWrapper').fadeToggle(function () {
stickyTimeout = setTimeout(function () {
window.switchIn();
}, 3000);
});
});
};
stickyTimeout = setTimeout(function () {
window.switchIn();
}, 5000);
jQuery('input#emailsignup').focus(function() {
clearTimeout(stickyTimeout);
});
} // End of both divs are visible if statement
});
Question:
How do I combine both in order to call the timeOut feature as part of the close of the sticky footer? Something like this?
First function amendment:
function closeSticky() {
jQuery('.stickyFooter').hide();
jQuery.cookie('stickyNewsClosed', 'yup', {
path: '/',
expires: 30
});
stopAnimation();
}
Second function amendment:
function stopAnimation() {
jQuery('input#emailsignup').focus(function() {
clearTimeout(stickyTimeout);
});
} // End stopAnimation function
console.log(function stopAnimation());
You have jQuery inside the functions, so i would suggest moving the 2 functions inside the dom ready scope. Your cleartimeout is probably calling in udefined.

How to make this script pause on hover?

I'm new to jQuery and I need a bit of help. I'm using this jQuery script as a testimonial rotator and it works like a charm but I just need to make one small tweak. I need it to be able to pause on hover and then restart when the mouse leaves the div. How can I do this?
This is the script I'm using:
function fadeMyContent() {
$(".testimonial:first").fadeIn(1000).delay(3000).fadeOut(1000,
function() {
$(this).appendTo($(this).parent());
fadeMyContent();
});
}
fadeMyContent();
});
Here is a JSFiddle.
There is a plugin that will provide all the functionality you need and be more reliable called jQuery Cycle 2.
It provides a 'pause-on-hover' option when initialising it.
change the definition of fadeMyContent (also called as destroying function) on hovering on ul#testimonial-rotator and on hover-out change it to old definition again. I have used setTimeout in place of delay because delay is not cancellable.
$(document).ready(function () {
var fadeMyContent;
var t
fadeMyContent = function () {
$(".rotate:first").fadeIn(1000)
t = setTimeout(function () {
$(".rotate:first").fadeOut(1000,
function () {
$(this).appendTo($(this).parent());
fadeMyContent();
});
}, 3000)
}
var fadeMyContentDummy = function () {
$(".rotate:first").fadeOut(1000,
function () {
$(this).appendTo($(this).parent());
fadeMyContent()
});
}
fadeMyContent();
$('#testimonial-rotator').hover(function (e)
{
window.clearTimeout(t)
$('.rotate:first').clearQueue()
fadeMyContent = function () {
return false;
}
},
function (e)
{
fadeMyContent = function () {
$(".rotate:first").fadeIn(1000)
t = setTimeout(function () {
$(".rotate:first").fadeOut(1000,
function () {
$(this).appendTo($(this).parent());
fadeMyContent();
});
}, 3000)
}
fadeMyContentDummy()
})
});
DEMO

Categories

Resources