Question

I created a messaging system which opens up in a jquery dialog when the user clicks the link. It check ever 5 seconds for new messages. the thing is, after the user closes the dialog it continues to check for messages which is using up a lot of resources if the user does not refresh the page. so is there a way to kill functions after closing the dialog?

Code which open the dialog.

$('body a#link').each(function() {
    var $dialog = $('<div></div>');
    var $link = $(this).one('click', function() {
        $dialog
            .load($link.attr('href'))
            .dialog({
                title: $link.attr('title'),
                width: 500,
                height: 300
            });

        $link.click(function() {
            $dialog.dialog('open');

            return false;
        });

        return false;
    });
});

Messenger.php (which is loaded into the dialog)

<script type="text/javascript">
$(function() {
$("form").submit(function() { return false; });
});

$('#message').keypress(function(e) {
if(e.which == 13) {
    $.ajax({
    type: "POST",
    url: "includes/sendmessage.php",
    data: $("#messageform").serialize(),
    success: function(){
        $("#message").val("");
}
    });
}
});

setInterval(function() {
 var msngr = $.ajax({
  type: "GET",
  url: "includes/checkmessages.php",
  success: function(msg){
        $('div#messages').html(msg);
        $("div#messages").scrollTop($("div#messages")[0].scrollHeight);
    }
});
}, 5000);
</script>
<div id="messages" style="width: 450px; height: 350px; overflow: auto;"><?php
include("includes/dbcon.php");
$result = mysql_query("SELECT * FROM messages WHERE message!='' ORDER BY id LIMIT 50") or die(mysql_error());
while($row = mysql_fetch_array($result)) {
    $username = $row['username'];
    $message = $row['message'];
    echo stripslashes($username) . ": " . stripslashes($message) . "<br />"; }
mysql_close($con); ?></div>
<form id="messageform" method="post" action="">
<input type="text" id="message" width="450px" maxlength="500" name="message" />
</form>

Answer 1

you’ll want to assign your repeating code a variable

var refreshTimer=null;

refreshTimer = setInterval(function() {
    var msngr = $.ajax({
        type: "GET",
        url: "includes/checkmessages.php",
        success: function(msg){
            $('div#messages').html(msg);
            $("div#messages").scrollTop($("div#messages")[0].scrollHeight);
        }
    });
}, 5000);

Then, when the dialog is closed you’ll want to use clearInterval() to stop the timer from re-executing.

if (refreshTimer) clearInterval(refreshTimer);

UPDATE

If you want to re-enable the timer, I would throw the whole thing in a function. This way you can call stopMessageRefreshTimer(); or startMessageRefreshTimer(); whenever you want.

var refreshTimer=null;

function stopMessageRefreshTimer(){
    if (refreshTimer) clearInterval(refreshTimer);
}
function startMessageRefreshTimer(){
    refreshTimer = setInterval(function() {
        var msngr = $.ajax({
            type: "GET",
            url: "includes/checkmessages.php",
            success: function(msg){
                $('div#messages').html(msg);
                $("div#messages").scrollTop($("div#messages")[0].scrollHeight);
            }
        });
    }, 5000);
}