clearInterval() when url hash changes?

[shortysbest]

I am building a website that all the pages are loaded by ajax and the entire site is hashed. I have a setInterval function that runs every 7 seconds to check for new comments, and if there are new comments in the database it loads them into the page. The problem with this is when I go to other pages in the website. (since the javascript page doesn't reload) it continues to count the time that you're not on the page that displays the comments, so if you go back to that page the exact time the timer reaches 0 seconds it load the incorrect content.

What I need to do is have this setInterval function clear when the hash isn't the correct one, and restart when it is. Or, just restart every time the hash changes.

 

How would the simplest way be to do this?

[.josh]

sounds like you need to make the clearInterval() call whenever the ajax call is made, or else in your ajax callback function.  But it's kind of hard to give more specific advice without seeing any code or a link to it in action or something...

[shortysbest]

Alright, Well here's the two parts of code. (setInterval, and page hash changing)

 

SetInterval:

 

$(document).ready(function(){
					   						   
setInterval(function() {
			  			   
		id = $.getUrlVar('id');
		var last_comment = $(".last-profile-comment").val();

		$.ajax({
		type: "POST",
		url: "ajaxpages/php/load_new_comments.php",
		data: "last_comment_id="+last_comment+"&to_id="+id,
		cache: false,
		success: function(html){
		if(html!="")
		{
			$(".profile-stream").prepend(html);
			$(".comment-container").fadeIn("slow");

		}
							}
				});	
	 }, 8000);
  
});

 

 

 

 

hashchanging:

 

$(function(){							
$(window).hashchange( function (){

var hash = location.hash;

var id2 = $.getUrlVar('id');

var id_start = hash.replace('#!/', '' )
var start_title = id_start.split('&');
var id = start_title[0];

if(id!="profile"){
document.title = ucwords(id+" - "+title);
}
$('#loading').html(loading);

$('.navigation-bar li a').each(function(){
    var that = $(this);
     that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'current-page' );
1  });

$.ajax({
type: "POST",
url: "inc/main/"+id+".php",
data: "profile_id="+id2,
cache: false,
success: function(html){

$(".container").html(html);
$('#loading').empty();

}
});
});
$(window).hashchange();
});

 

[shortysbest]

anyone? D:

[haku]

If the whole site is loaded through ajax, then create a function through which all page clicks are passed. Inside this function, clearInterval() if necessary, then go on to load the page that needs to be loaded. As long as all page clicks pass through this function, you should be ok.

[shortysbest]

Thanks, but would you be able to help me with this code? i've tried everything and it doesn't clear the interval. Also, is there anyway to clear all intervals with one function? Thanks.

 

 $('a').click(function(){clearInterval(last_comment());});
});
////////////////////////GET AND SHOW NEW STATUS COMMENTS ON THE FLY///////////////////////////////

$(document).ready(function()
{
setInterval(function(){last_comment()}, 3000);

function last_comment() {
			  			   
		var id = $.getUrlVar('id');
		var last_comment = $(".last-profile-comment").val();

	$.ajax({
		type: "POST",
		url: "ajaxpages/php/load_new_comments.php",
		data: "last_comment_id="+last_comment+"&to_id="+id,
		cache: false,
		success: function(html){
		if(html!="")
		{
		$(".profile-stream").prepend('a');
		$(".comment-container").fadeIn("slow");
		}
			}
		});	
	 }


})

[haku]

First, set a global outside of the rest of your code:

var myInterval;

 

Then assign the value from setInterval() to that global:

myInterval = setInterval(function(){last_comment()}, 3000);

 

And finally, call clearInterval() on that global:

clearInterval(myInterval);

[shortysbest]

Thanks. However I just cannot get this to work. Could you check my code and see if it's right?

 

(also, this is in the global javascript file which Doesn't load at all unless you refresh the page, when you go to different pages it's using ajax/hash so it doesn't reload this javascript)

 

 

var myInterval;



////////////////////////GET AND SHOW NEW STATUS COMMENTS ON THE FLY///////////////////////////////

$(document).ready(function()
{
myInterval =  setInterval(function(){last_comment()}, 6000);

function last_comment() {
			  			   
		var id = $.getUrlVar('id');
		var last_comment = $(".last-profile-comment").val();

	$.ajax({
		type: "POST",
		url: "ajaxpages/php/load_new_comments.php",
		data: "last_comment_id="+last_comment+"&to_id="+id,
		cache: false,
		success: function(html){
		if(html!="")
		{
		$(".profile-stream").prepend(html);
		$(".comment-container").fadeIn("slow");
		}
			}
		});	
	 }


})

$('.navigation li').click(function(){clearInterval(myInterval);});

[haku]

I think this:

 

$('.navigation li').click(function(){clearInterval(myInterval);});

 

May need to be this:

 

$('.navigation li').each(function()
{
  $(this).click(function(){clearInterval(myInterval);});
});

[shortysbest]

Thanks, this seems to work well. I just added the variable underneath so it will restart the interval each time the page loads. The reason for this is it seems to use a lot of system ram when the site is open for very long, but when you refresh the entire page (restarts the javascript) it goes back to normal for some time. I'm assuming that it's got something to do with the intervals running on so much and never being cleared, so they just get piled up or whatever.

 

Thanks for the help with this. If you have the time and could take a look at another problem I am having that would be great.

 

http://www.phpfreaks.com/forums/javascript-help/hash-url-based-website-load-pages-with-multiple-variables-in-url-etc/