setInterval with auto-clearInterval

Question

I’m creating a way to extract data from Twitter without being quoted the values of their API. The best way I found was using the widget that they provide (and that has no quota) and from its loading I "take the information" and treat them.

My problem is that I am unable to think of a way to make the page check if there is a tag in the element body that Twitter creates after its upload [data-twttr-rendered=true].

I tried to make a setInterval analyzing whether this exists and, if it exists, it executes a function and how callback already runs its own clearInterval thus:

var twitter = setInterval(function(){
    if($('body[data-twttr-rendered=true]').length != 0){
        page.twitter.mutage(function(){clearInterval(twitter)});
    }
},1000);

The problem that by executing such code I can bug the DOM and block the entire site...
Someone there has a better answer for me please?

Answer 1

The reason the site "hangs" is probably because it is generating numerous calls from setInterval.

The setInterval never stops except when called the clearInterval, other than setTimeout that stops after the process.

In your code is probably running several times is part:

var twitter = setInterval(function(){
...
},1000);

That is to say, there are several "events" running at the same time and probably are being created new, until the browser does not hold.

You can do two things:

1. Use setTimeout instead of setInterval, because the first waits for the event to end differently from the setInterval.
2. Create a check if your code is already running, this you can use the variable itself twitter

The code should look something like:

var exec;
var twitter = null;
var initiate = function () {
    if (twitter === null) {//Se a variavel for null então executa, se não previne executar mais de uma vez
        var exec = function () {
            if($('body[data-twttr-rendered=true]').length !== 0){
                page.twitter.mutage(function(){
                    //...Código pode ser chamado, não necessita de window.clearTimeout
                });
            } else {
                //Se não encontrar o atributo data-twttr-rendered=true em body então executa novamente
                twitter = window.setTimeout(exec, 1000);
            }
        };
        exec();
    }
};
initiate();//Inicia o event

Mutationobserver

Another method you can use is the MutationObserver, however as you are using jQuery, then I will indicate you a plugin that does a similar job, is the jQuery-Observer.

var bodyDetect = $('body');
bodyDetect.observe({
    "attributes": true,
    "attributeFilter": ['data-twttr-rendered']
}, function(record) {
    page.twitter.mutage(function () {
        //...Código pode ser chamado
    });
});