I have a Chat webapp as part of a project for a client.

To store data, every line is logged in a `.txt` file and a Javascript/jQuery function that uses `Ajax` to retrieve data is called every 1000ms.

To prevent the function being called every second, **is there a way for the page to be alerted to new data and only call the function when new data exists**?

Here is my current function:

```
setInterval (loadLog, 1000);

function loadLog(){
    var chatCode = $('input#chatCode').val();
    var oldscrollHeight = $("#chatContent").innerHeight();
    var oldNum = $('#chatContent>div').length;

    $.ajax({
        url: "sessions/chats/log_"+chatCode+".html",
        cache: false,
        success: function(html){
            $('#chatContent').html(makePretty(html));
        }

            //Auto-scroll           
            var newscrollHeight = $("#chatContent").innerHeight(); //Scroll height after the request
            if(newscrollHeight > oldscrollHeight){
                $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal');
            }
        }
    })
}

```

And to send data:

```
$('form#chatSubmit').submit(function(e){
    var chatCode = $('input#chatName').val();                               
    $('#chatContent').append('<span id="sending">Sending...</span>');
    var newscrollHeight = $("#chatContent").innerHeight();
    $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal');

    var clientmsg = $("#usermsg").val();
    var chatName = "<?php echo $_SESSION['code']; ?>";
    var chatData = [clientmsg,chatName,chatCode];
    var jsonChatData = JSON.stringify(chatData);
    $.post("inc/chatpost.php", { text: clientmsg, name: chatName, code: chatCode })
        .done(function(data){
            //console.log(data);
        });
    $("#usermsg").val('');
    return false;
    e.preventDefault();
});

```