Tornar a execução de uma função mais rápida

Fernando Sousa · December 20, 2011

Tenho um arquivo abaixo que na parte <script> que em cada função existe a linha document.getElementById("p").innerHTML='<img src="onca.jpg" id="imga"/>' que faz o navegador colocar a imagem a cada 1 milissegundo (devido a variavel timea ou timeb),o que pode fazer com que a caixa cinza se mova com menos rapidez.

Como fazer uma função que define o ".innerHTML " apenas uma vez e executar continuamente uma outra função que altere as variáveis correspondentes a cada 1 milésimo de segundo?

Obrigado.

Arquivo disponível em:

Skydrive - transição.zip

Nota:

*Eu deixei algumas funções inertes e outras transformei em comentários. Preferi deixa-las lá,pois é meu costume não deletar uma linha ,apenas transformar em comentário verificar seus efeitos,e comparar.

*se alguém estiver interessado em melhorias dessa aplicação como estabilização da caixa sobre a miniatura quando o mouse estiver em cima,ou outras melhorias pode tambem me adicionar como amigo no MSN.

Edited December 20, 2011 by Fernando Sousa

lucas.js · December 20, 2011

Você pode fazer uma variavel booleana com valor inicial true;

você executa o Innerhtml so se essa variavel for true, e dentro disso, atribui a ela o valor false.

(so executará uma vez).

Mudei seu codigo para melhor desempenho:

se quiser testar está aqui a página:

<html>
<head>
&lt;script>
//------------------- V A R I A V É I S -------------------


ica=30;
ic=30;
i=50;
j=50;
inicial=true;
var timec,
timerc,
caixaaa,
caixaab,
caixaba,
caixabb;

//------------------- F U N Ç Õ E S ------------------------

function fundoa(){
    if(inicial){objetop.innerHTML='<img src="onca.jpg" id="imga"/>';inicial=false;}
    objetop.style.opacity=i/100;
    objetocaixa.left=ic+"px"; //Compatibilidade
    if(ic>=30)ic-=14;
    if(ic-30<5)ic=30;
    if(i<=100){i+=5;setTimeout("fundoa()",50);}
    else{inicial=true;i=50;setTimeout("fundob()",3500);}
}
function fundob(){
    if(inicial){objetop.innerHTML='<img src="onca2.jpg" id="imgb"/>';inicial=false;}
    objetop.style.opacity=i/100;
    objetocaixa.left=ic+"px";//Compatibilidade
    if(ic<=182)ic+=14;
    if(182-ic<5)ic=182;
    if(i<=100){i+=3;setTimeout("fundob()",50);}
    else{inicial=true;i=50;setTimeout("fundoa()",3500);}
}

</script>
</head>
<body onload="objetop=document.getElementById('p');objetocaixa=document.getElementById('caixa').style;fundoa()">
<p id="p"></p>
<img src="caixa.png" id="caixa"/>
<img src="onca.jpg" id="img1" />
<img src="onca2a.jpg" id="img2" />
<style>
.fundo{position:absolute;}
#imga{position:block;}
#imgb{height:266px;width:422px;position:block;}
p{height:500px;
width:650px;
border:1px solid gray;
border-radius:5px;
background:black;
}
#caixa{position:relative;border:1px solid transparent;height:111px;width:153px;z-index:2;margin-top:-9px;opacity:0.8;}    
img{border:1px solid gray;margin-top:30px;margin-left:40px;
}
#img1{margin-top:1px;margin-left:-125px;height:100px;width:151px;position:absolute;z-index:1;border-radius:7px;}
#img2{margin-left:30px;margin-top:1px;height:99px;width:150px;position:absolute;z-index:1;border-radius:7px;}
</style>
</body>
</head>

rickynavas · December 28, 2011

Olá,

Achei melhor trabalhar com um objeto, assim as funções e valores ficam armazenados nele:

<html>
<head>
<style>
p{height:500px;width:650px;border:1px solid gray;border-radius:5px;background:black;}
#caixa{position:relative;border:1px solid transparent;height:111px;width:153px;z-index:2;margin-top:-9px;opacity:0.8;}
img{border:1px solid gray;margin-top:30px;margin-left:40px;}
#img1{margin-top:1px;margin-left:-125px;height:100px;width:151px;position:absolute;z-index:1;border-radius:7px;}
#img2{margin-left:30px;margin-top:1px;height:99px;width:150px;position:absolute;z-index:1;border-radius:7px;}
</style>
</head>
<body>
<p id="p"></p>
<img src="caixa.png" id="caixa"/>
<img src="onca.jpg" id="img1" />
<img src="onca2a.jpg" id="img2" />

&lt;script>
(function(){if(window.addEventListener){window.addEventListener("load",fundoa,false)}else{window.attachEvent("onload",fundoa)}})();
var painel={
    imagens:["onca.jpg","onca2.jpg"],
    campo:document.getElementById("p"),
    caixa:document.getElementById("caixa").style,
    mudaFundo:function(a){this.campo.innerHTML="<img src="+a+">";this.campo.style.opacity=this.opacidade/100;this.caixa.left=painel.posicao+"px"},
    setTimer:function(a,b){setTimeout(a,b)},
    opacidade:50,
    posicao:0,
    mudaOpacidade:function(a,b){if(this.opacidade<=100){this.opacidade+=5;this.setTimer(a,90)}else{this.opacidade=50;this.setTimer(b,3500)}}
}

function fundob(){
    painel.mudaFundo(painel.imagens[1]);
    painel.mudaOpacidade("fundob()","fundoa()");
    if(painel.posicao<=182){painel.posicao+=14}if(182-painel.posicao<5){painel.posicao=182}}

function fundoa(){
    painel.mudaFundo(painel.imagens[0]);
    painel.mudaOpacidade("fundoa()","fundob()");
    if(painel.posicao>=30){painel.posicao-=14}if(painel.posicao-30<5){painel.posicao=30}}
    
</script>
</body>
</html>

Edited December 28, 2011 by rickynavas

Fernando Sousa · December 28, 2011

rickynavas:

Parece que seu código deixa a caixa mover-se com menos rapidez,se comparado ao código de lucas.js. :huh:

Eu estou fazendo um novo código,porém desta vez mais dinamico B) (caixa pára freando, quando o cursor passa por cima da miniatura,a caixa vai para essa miniatura -utilizando os recursos do objeto event-,colocar texto no painel,etc...).

Ao conseguir isso irei postar o código aqui. Aceito contribuições :D . Obrigado.

Edited December 28, 2011 by Fernando Sousa

lucas.js · December 28, 2011

cara se quiser eu ajudo...

mas infelizmente não vou poder até dia 07 de janeiro...

a partir de agora irei revisar conhecimentos para o vestibular da UFMG.

Depois volto a ativa.

Se até lá você não tiver acabado...

Edited December 28, 2011 by lucas.js

rickynavas · December 30, 2011

Olá,

A velocidade da caixa depende desse metodo:

mudaOpacidade:function(a,b){
    if(this.opacidade<=100){
        this.opacidade+=5;
        this.setTimer(a,90) //mudar de 90 para 50, torna o move mais rápido;
    }else{
        this.opacidade=50;
        this.setTimer(b,3500)
    }

:)

Qualquer coisa estamos por ae :D

Edited December 30, 2011 by rickynavas

lucas.js · January 10, 2012

Fernando,

coloca ai o novo arquivo, ou o link dele para ver se contribuo com algo.

Fernando Sousa · January 10, 2012

Ok.

Está um pouco desorganizado,mas no rumo!

perceba que eu quero duas DIVs, uma em cada lado da caixa, e que fique por cima das miniaturas,com opacity=0.5.

perceba que existe uma div superior,no código ela tem id="mascara" e deve ser superior pois é aonde o cursor vai ter contato naquela area.

veja o que acontece quando você clica duas vezes sobre uma miniatura num espaço de tempo~=3s.

Link=

https://skydrive.live.com/redir.aspx?cid=93...BBE7821!109

F L W.

fiote · January 10, 2012

alguém pode postar um link disso rodando online pra eu ter uma idéia do que vocês estão falando? (jsFiddle serve).

Fernando Sousa · January 10, 2012

alguém pode postar um link disso rodando online pra eu ter uma idéia do que vocês estão falando? (jsFiddle serve).

basta você baixar o arquivo,(.zip) e executar o.html no seu computador.

Seu navegador padrão irá executá-lo

Fernando Sousa · January 11, 2012

Pessoal tive um problema aqui.

Os arquivos :

Skydrive- Painel Onça 2.0 beta 1

Nessa pasta há um .zip onde estão os arquivos necessários para o documento .html. Os outros dois documentos .html são para fazer uma comparação.

Observem que a caixa não pára em cima das miniaturas(e adquire novas posições se a execução do html continuar,observem bem).Este é o problema

que tentei resolver.No "onca 2.0-beta1" eu tentei resolver o problema mas deu em outro....

Edited January 11, 2012 by Fernando Sousa

lucas.js · January 24, 2012

estou fazendo uma pequena biblioteca para isso,

quando terminar coloco aqui pra vocês verem.

Sign In

Tornar a execução de uma função mais rápida

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Forum Statistics