setInterval is not working correctly

Question

What this is all about

I am currently working on a script for emoticons on the Campfire Chat Service since they don't have an emoticon feature. Right now it is running the emoticon really slowly since it uses a setInterval that is suppose to check ever 200 milliseconds if there is a new message in the chat. I do this by making two variables "a" and "b" with var a,b;. So then in the first setInterval I time it with 150 millisecond. Inside of this I just give the variable "a" the value of the HTML of the chat. Then in the second setInterval (200) I give the variable "b" the value of the HTML too but this is a different timing so now I check the HTML in an if statement and if it is different I run the function to change the Symbol to an emoticon. I did it this was to improve performance. Before it would check for emoticons even though no one in the Campfire Chat actually wrote something so there is no need to check for emoticons.

This is the complete function:

var a, b;
setInterval(function() {
    a = $('#chat').html();
    console.warn("Chat HTML has been Scanned");
}, 150);
var t = "0";
setInterval(function() {
    b = $('#chat').html();
    console.warn("Chat got scanned for Change in html.");
    if (emoOn == true) {
        if (t === $('#num12345').text()) {
            $(".participants").after('<div id="emote"><h3><span class="room_actions"><a href="javascript:void(0)" class="on" style="font-weight:bold;">On</a> | <a href="javascript:void(0)" class="off" style="cursor:pointer;">Off</a></span>Emoticons</h3></div>');
            $('#num12345').text("111")
        }
        if (a !== b) {
            turnOn();
            console.log("CHANGE")
        } else {
            turnOn("off");
        }
    }
}, 200)​;

The problem

As you can see in the above code I run 3 consoles. In the consoles I expect the "Chat HTML has been Scanned" warning to come for and then the "Chat got scanned for Change in html." in that order for the whole time. But instead the "Chat HTML has been Scanned" warning shoes up twice it just doesn't work like I image it to work.

And when a new message shows its suppose to log "Change" but most of the time it doesn't and I think it is the problem of the setIntervals. It seems like they aren't timing right. But I really don't wanna say that JavaScript is causing this issue but I don't know what else it could be. Also I'm using Chrome.

Answer 1

setInterval is asynchronous, so when your first call is waiting, the javascript interpreter moves on to it's next job (in this case setting t to "0" and then your second setInterval call).

Edit: I think the problem is that you're defining your setInterval calls at the same time, yet the precision of javascript timers is not that great (see here: http://ejohn.org/blog/accuracy-of-javascript-time/).

You could call the second setInterval after a setTimeout to give yourself a bit of a buffer:

var a, b;
setInterval(function() {
    a = $('#chat').html();
    console.warn("Chat HTML has been Scanned");
    var t = "0";
}, 2000);
setTimeout(function(){
    setInterval(function() {
        b = $('#chat').html();
        console.warn("Chat got scanned for Change in html.");
        if (emoOn == true) {
            if (t === $('#num12345').text()) {
                $(".participants").after('<div id="emote"><h3><span class="room_actions"><a href="javascript:void(0)" class="on" style="font-weight:bold;">On</a> | <a href="javascript:void(0)" class="off" style="cursor:pointer;">Off</a></span>Emoticons</h3></div>');
                $('#num12345').text("111")
            }
            if (a !== b) {
                turnOn();
                console.log("CHANGE")
            } else {
                turnOn("off");
            }
        }
    }, 2000)​;

}, 500);

This will set up the second call to setInterval half a second after the first, you could get away with a lot less than that though (anything over 30ms should be enough).