I want to auto reload div in my site. If I click to bottom the script reload another div when i use clearInterval to stop interval1 it not working the script reload again interval1 ,when i use console.log interval i find false and the script reload again clearInterval not working or??
<script type="text/javascript">
var interval2;
var interval1;
$(document).ready(function() {
var get_template = function() {
$("#live-grouped-odds-current").load("template.php");
}
interval2 = setInterval(get_template, 6000);
$("#live_details").click(function() {
clearInterval(interval2);
console.log(interval2);
$('#live-overview-menuitem').removeClass('Actual');
$('#live_details').addClass('Actual');
$("#button_sp").css('display', 'none');
$("#button_dt").css('display', 'block');
clearInterval(interval2);
interval2 = false;
$("#live-grouped-odds-current").empty();
$("#loader12").css('visibility', 'visible');
$("#live-grouped-odds-current").load("details.php");
});
$("#loader12").css('visibility', 'visible');
$.get("details/events.php", function(data1) {
$("#event_list").html(data1);
});
$("#loader12").css('visibility', 'hidden');
var refresh = function() {
$.get("details/events.php", function(data1) {
$("#event_list").html(data1);
});
$.get("details/simple_event.php", function(data) {
$("#simple_event").html(data);
});
}
interval1 = setInterval(refresh, 6000);
});
function simple_event(id) {
clearInterval(interval1);
$('.Event').removeClass('Actual');
$("#" + id).attr('class', 'Actual');
$("#simple_event").empty();
$("#loader12").css('visibility', 'visible');
$.get("details/simple_event.php?id=" + id, function(data) {
$("#simple_event").html(data).hide();
$("#simple_event").slideDown(1000);
//alert( "Load was performed." );
$("#loader12").css('visibility', 'hidden');
});
interval1 = setInterval(refresh, 6000);
}
</script>
When you call clearTimeout it means the interval will not be triggered again, but if $("#live-grouped-odds-current").load("template.php"); is still running it will complete. If $("#live-grouped-odds-current").load("template.php"); takes more time than 6000ms you will begin to do multiple request in parallel as well. (It would be better to use setTimeout I think)
Once you call clearInterval(interval2) the first time, set interval2 to undefined
$("#live_details").click(function() {
clearInterval(interval2);
inteval2 = undefined;
});
and change get_template to
var get_template = function() {
$.get("template.php", function( data ) {
if (inteval2 !== undefined) {
$("#live-grouped-odds-current").html( data );
}
});
}
so #live-grouped-odds-current won't be undated if the interval has been cleared
Related
I'm working on a Table that logs all action and refreshes the table based on the interval given.
Everything works fine except when using setInterval, here's my code:
var interval = 3000;
var interval_en = true;
$(document).ready(function() {
$('#logs_tbl').DataTable();
$('.paginate_button,.paginate_button.current').click(function(){
e.preventDefault();
console.log("paginate click");
interval_en = false;
}).change(function(e){
e.preventDefault();
console.log("paginate click");
interval_en = false;
});
var aclogs_interval = setInterval(function () {
if(interval_en){
console.log("logging=true");
aclog_refresh(); //This function refreshes the table via Ajax
}else{
console.log("logging stopped");
clearInterval(aclogs_interval);
}
}, interval);
} );
What have I tried so far:
Different selector:
$('#logs_tbl_paginate a').click(function(){
interval_en = false;
clearInterval(aclogs_interval);
});
Binding per interval:
var aclogs_interval = setInterval(function (e) {
if(interval_en){
console.log("logging=true");
aclog_refresh();
$('.paginate_button,.paginate_button.current').click(function(){
e.preventDefault();
console.log("paginate click");
interval_en = false;
}).change(function(e){
e.preventDefault();
console.log("paginate click");
interval_en = false;
});
}else{
console.log("logging stopped");
clearInterval(aclogs_interval);
}
}, interval);
Though manually triggering interval_en = false; in the browser console will stop it. Still can't find out what went wrong.
Also clicking the pagination buttons before the first interval occur works.
You could try the following:
$('#logs_tbl').on( 'page.dt', function () {
console.log("paginate click");
$('.btn-live,.btn-notlive').prop('class','btn-notlive');
interval_en = false;
} );
This example is reference by datatable site.
Requirement :
If user is inactive then show a popup after 5 minutes. and if selected continue session the timer will reset for this and again check for the same.
If user haven't click any continue button then the page will refresh.
How do you want to check if they are inactive?
You can tie an event to both the keyboard and mouse and reset timer each time the mouse moves/clicks or keydown.
<body onmousemove = "canceltimer()"; onclick = "canceltimer()">
var tim = 0;
function reload ()
{
tim = setTimeout("location.reload(true);",180000); // 3 minutes
}
function canceltimer()
{
window.clearTimeout(tim); // cancel the timer on each mousemove/click
reload(); // and restart it
}
Using jQuery:
$(function() {
(function handleInactivity() {
var maxIdleTime = 5000; // 5 seconds
var timeout = setTimeout(displayPopup, maxIdleTime);
function resetTimer() {
console.log("Timer reset");
clearTimeout(timeout);
timeout = setTimeout(displayPopup, maxIdleTime);
}
function displayPopup() {
console.log("You're up");
// Display popup of your choice
}
$(document).on("mousemove", resetTimer);
$(document).on("mouseDown", resetTimer);
$(document).keypress(resetTimer);
})();
});
_inactiveUserPopUp = function(warningTime,PageReloadTimeAfterWaring){
var maxIdleTime = warningTime *1000,timeout,resetTimer,displayPopup,pageReload;
timeout = setTimeout(displayPopup, maxIdleTime);
resetTimer = function(){
// console.log("Timer reset");
clearTimeout(timeout);
timeout = setTimeout(displayPopup, maxIdleTime);
};
displayPopup = function(){
//console.log("You're up");
clearTimeout(timeout);
var reloadPage = setTimeout(pageReload, PageReloadTimeAfterWaring*1000);
$(".modalDialog").css({
"opacity": 1,
"display": "block"
});
$(".close").on("click", function() {
$(".modalDialog").css({
"opacity": 0,
"display": "none"
});
});
$("#extend-session").off().on("click", function() {
clearTimeout(reloadPage);
$(".modalDialog").css({
"opacity": 0,
"display": "none"
});
$.ajax({
url: $("#openModal").data("ajaxUrl"),
type: "POST",
data: {
activeUser: true
},
success: function(data) {
}
});
});
};
pageReload = function(){
//console.log("reload page now")
$(document).off("mousemove");
$(document).off("mouseDown");
$(document).off("keypress");
window.location.reload();
};
$(document).on("mousemove", resetTimer);
$(document).on("mouseDown", resetTimer);
$(document).keypress(resetTimer);
};
I am facing one problem in JS, please help me to resolve this.. I have two methods they are simultaneously executing one after other.. I have to stop them after second click on image.
Below is my JS code
I am calling fadeIn(img1, img2, img3) after first click on image then some animation will be goes on, once I click second time the whole animation(method execution) should be stopped.
var t1 = 0;
var t2 = 0;
function fadeIn(img1, img2, img3) {
$(imgIdForClick_1).addClass('animated pulse');
$('#cashBar1').addClass('animated pulse');
$('#cashBarDec1').addClass('animated pulse');
var t1 = setTimeout(function() {
fadeOut(img1, img2, img3);
if (clickCount_1 >= 2) {
alert("clicked 1");
return false;
}
}, 500);
//t1 = setTimeout(fadeOut, 500);
};
function fadeOut(img11, img22, img33) {
$(imgIdForClick_1).removeClass('animated pulse');
$('#cashBar1').removeClass('animated pulse');
$('#cashBarDec1').removeClass('animated pulse');
var t2 = setTimeout(function() {
fadeIn(img11, img22, img33);
if (clickCount_1 >= 2) {
alert("clicked 2");
return false;
}
}, 500);
//t2 = setTimeout(fadeIn, 500);
};
By below code I am calling this snippet in first click
imgId1 = $('#img1');
imgId2 = $('#cashBar1');
imgId3 = $('#cashBarDec1');
fadeIn(imgId1, imgId2, imgId3);
After second click
clickCount_1 varibale will be 2
clearTimeout(t1);
clearTimeout(t2);
See the DEMO. Click on the image to stop animation.
I have added a flag that would be checked upon the call of the function, and if the value is true then and then only the functions would be called. The flag would be set to false when clicked on image, so the function would be called no longer.
code:
var animate = true;
function fadeIn() {
$('#pulseDiv').find('div#advisersDiv').delay(400).addClass("pulse");
if(animate == true)
{
setTimeout(fadeOut,1000);
}
};
function fadeOut() {
$('#pulseDiv').find('div#advisersDiv').delay(400).removeClass("pulse");
if(animate == true)
{
setTimeout(fadeIn,1000);
}
};
fadeIn();
$('#image').click(function(){
animate = false;
alert('now the animation will stop');
});
I am trying to create a toggle effect for the delay function
Click on function:
$('#swap').on('click', function(e){
//code bellow $('#swap').delay(1000).attr('src') == 'Play.png'
if ($(this).attr('src') == 'Play.png') {
$('#swap').attr('src') == 'Pause.png'
}
else{
$('#swap').attr('src') == 'Play.png'
}
On click there starts a delay for another function:
$('#swap').delay(1000).attr('src') == 'Play.png'
And after that if you click on the #swap again the delay pauses (Not stops) and if you click again the delay then continues. Is this possible?
Because currently the delay would just start again from the beginning if clicked?
.delay()
Set a timer to delay execution of subsequent items in the queue.
(ex : animations like fadeIn(), fadeOut(), .slideUp(), slideDown()... )
Doc : http://api.jquery.com/delay/
In your case , Try to use :
setTimeout(function(){
// Do something
},1000);
If I understand, You mean somthing like this ..?
var clicked;
$('#swap').on('click', function(e) {
if(!clicked) {
setTimeout(function(){
$(this).attr('src','Play.png');
},1000);
clicked = true;
} else {
$(this).attr('src','Pause.png');
clicked = false;
}
});
Or use toggle event
$('#swap').toggle(function() {
setTimeout(function(){
$(this).attr('src','Play.png');
},1000);
},function() {
$(this).attr('src','Pause.png');
});
Doc : http://api.jquery.com/toggle-event/
Update :
$('#swap').on('click',function() {
var $this = $(this);
var src = $this.attr('src');
if (src == 'Play.png') {
setTimeout(function(){
$this.attr('src','Pause.png');
},1000);
} else {
$this.attr('src','Play.png');
}
});
Update with clearTimeout() :
var swapTimer;
$('#swap').on('click', function () {
var $this = $(this);
var src = $this.attr('src');
if (src == 'Play.png') {
swapTimer = setTimeout(function () {
$this.attr('src', 'Pause.png');
}, 1000);
} else {
clearTimeout(swapTimer);
$this.attr('src', 'Play.png');
}
});
Demo : http://jsfiddle.net/qnDh8/ (Play.png = red, Pause.png = yellow)
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.