1

Estou criando uma forma de extrair dados do Twitter sem que seja cotado com os valores da API deles. A melhor forma que encontrei foi usando o widget que eles disponibilizam (e que não tem cota) e a partir de seu carregamento eu "pegar as informações" e tratá-las.

O meu problema é que não estou conseguindo pensar numa forma de fazer a página verificar se existe uma tag no elemento body que o Twitter cria após seu carregamento [data-twttr-rendered=true].

Tentei fazer um setInterval analisando se isso existe e, caso exista ele executa uma função e como callback já executa seu próprio clearInterval assim:

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

O problema que ao executar tal código eu consigo bugar o DOM e travo o site inteiro...
Alguém ai tem uma resposta melhor pra mim por favor?

1
  • 1
    Pra que serve a função page.twitter.mutage? E pra que cancelar o intervalo?
    – bfavaretto
    18/02/2015 às 0:57

1 Resposta 1

2

O motivo do site "travar" é porque provavelmente está gerando inúmeras chamadas do setInterval.

O setInterval nunca para a não ser quando chamado o clearInterval, diferente do setTimeout que para após o processo.

No seu código provavelmente está executando várias vezes está parte:

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

Ou seja ficam vários "eventos" rodando ao mesmo tempo e provavelmente ficam sendo criados novos, até o navegador não aguentar.

Você pode fazer duas coisas:

  1. Usar setTimeout ao invés de setInterval, pois o primeiro espera o evento terminar diferente do setInterval.
  2. Criar um verificação se o seu código já está rodando, isto você pode usar a própria váriavel twitter

O código deve ficar algo como:

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

Outra metodo que você pode usar é o MutationObserver, porém como você está usando jQuery, então irei lhe indicar um plugin que faz um trabalho parecido, é o jQuery-Observer.

var bodyDetect = $('body');
bodyDetect.observe({
    "attributes": true,
    "attributeFilter": ['data-twttr-rendered']
}, function(record) {
    page.twitter.mutage(function () {
        //...Código pode ser chamado
    });
});
1
  • @LeandroLUK Havia um erro no código com setTimeout eu corrigi, se estiver usando ele por favor atualize 18/02/2015 às 18:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .