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

Fernando Sousa · Dezembro 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.

Editado Dezembro 20, 2011 por Fernando Sousa

lucas.js · Dezembro 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 · Dezembro 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>

Editado Dezembro 28, 2011 por rickynavas

Fernando Sousa · Dezembro 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.

Editado Dezembro 28, 2011 por Fernando Sousa

lucas.js · Dezembro 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...

Editado Dezembro 28, 2011 por lucas.js

rickynavas · Dezembro 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

Editado Dezembro 30, 2011 por rickynavas

lucas.js · Janeiro 10, 2012

Fernando,

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

Fernando Sousa · Janeiro 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 · Janeiro 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 · Janeiro 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 · Janeiro 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....

Editado Janeiro 11, 2012 por Fernando Sousa

lucas.js · Janeiro 24, 2012

estou fazendo uma pequena biblioteca para isso,

quando terminar coloco aqui pra vocês verem.

Entrar

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

Pergunta

Link para o comentário

Compartilhar em outros sites

11 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns