Pause com barra de progresso

Lamenza · Janeiro 23, 2008

Tenho duas páginas que trabalham associadas. A página "pai" passa parâmetros na string para a página "filho". A página "filho" responde a página "pai" (parent.Resposta()) que executou sua função. Ocorre que sua função é salvar dados num banco de dados, cujo tempo de processamento não é o mesmo das páginas "pai" e "filho". Como a página "pai" pode mandar vários lotes de dados, usei uma rotina em javascript que gera uma pausa na execução do envio dos lotes e exibe uma barra de progresso, para que o usuário saiba que algum processamento ocorre.

O erro se dá quando a barra entra num loop - se não infinito - maior que o número de lotes.

Funciona mais ou menos assim (a página abaixo não tem o mesmo conteúdo que as minhas, mas os erros são idênticos):

página chamadora

<html>

<head>
<title>Implementing Wait in Javascript</title>
&lt;script language="javascript" type="text/javascript" src="Barra.js"></script>
&lt;script language="javascript" type="text/javascript">
//função chamada pela barra de progresso, só chamada ao final do tempo definido em Barra.js
function AcaoBarra(arg1, arg2){
//alert(arg1 + " - " + arg2);
    }

function teste(){
    for (var i=0;i<5;i++){
        BarraCria('teste','PBouter1','PBdone1');
        }
    }
</script>
</head>

<body leftmargin="15" topmargin="0" bgcolor="#EEEEFF">
<input type="button" onclick="teste()" />
<br />
<div id="teste"></div>

</body>
</html>

O código "Barra.js" é o seguinte:

var AlturaAntes = 0;
var BarraAltura=15;                  
var BarraLargura = screen.availWidth;
var BarraTempo=2;                   
var BarraIndicador=(BarraLargura-2)/BarraTempo/10;
var BarraCarregada=0;
var CorAntes = "";
var Pid=0;
var BarraAvanca = true;

function BarraVars(){
    AlturaAntes = 0;
    BarraAltura=15;                  
    BarraLargura = screen.availWidth;
    BarraTempo=2;
    BarraIndicador=(BarraLargura-2)/BarraTempo/10;
    BarraCarregada=0;
    CorAntes = "";
    Pid=0;
    BarraAvanca = true;
    
    }

function BarraOculta(el_Ancora,el_Tabela,el_Barra,aArg){
    el1 = document.getElementById(el_Tabela);
    el2 = document.getElementById(el_Barra);
    el2.style.width = 0;
    el2.style.height = 0;
    clearInterval(Pid);
    window.status='';
    AcaoBarra(aArg);
    BarraCarregada = 0;
    BarraAltura = 15;
    linhaBarra = document.getElementById(el_Ancora);
    linhaBarra.style.backgroundColor = CorAntes;
    linhaBarra.style.height = AlturaAntes;
    //el2.parentNode.removeChild(el2);
    //el1.parentNode.removeChild(el1);
    //BarraAvanca = false;
    //BarraVars();
    }

function BarraCria(el_Ancora,el_Tabela,el_Barra,aArg){
    linhaBarra  = document.getElementById(el_Ancora);
    CorAntes    = linhaBarra.style.backgroundColor;
    AlturaAntes = linhaBarra.style.height;
    linhaBarra.style.backgroundColor = "yellow";
    vertab = document.getElementById(el_Tabela);
    if (!vertab) {
        //BarraAvanca = true;
        CriaTab(el_Ancora,el_Tabela,el_Barra,1);
        }
    el1 = document.getElementById(el_Tabela);
    BarraRedimensiona(el_Barra,0,0,BarraAltura-2,0);
    el1.style.visibility="visible";
    Pid=setInterval(function() { BarraAvanco(el_Ancora,el_Tabela,el_Barra,aArg); },95);
    }

function BarraAvanco(el_Ancora,el_Tabela,el_Barra,aArg){
    window.status="Carregando...";
    BarraCarregada++;
    if(BarraCarregada<0)BarraCarregada=0;
    if(BarraCarregada>=BarraTempo*10){
        clearInterval(Pid);
        BarraCarregada=BarraTempo*10;
        BarraOculta(el_Ancora,el_Tabela,el_Barra,aArg);
        }
    BarraRedimensiona(el_Barra, 0, BarraIndicador*BarraCarregada, BarraAltura-2, 0);
    }

function BarraRedimensiona(id_elemento,t,r,b,l){
    //alert(BarraAvanca)
    if (BarraAvanca){
        vertab = document.getElementById(id_elemento);
        if (vertab) {
            elemento = document.getElementById(id_elemento);
            elemento.style.width=r+'px';
            }
        }
    }
    
function CriaTab(idancora,idtabela,idlinha,celulas){
    var elemento = document.getElementById(idancora);
    tabela = document.createElement("<table border='0' cellpadding='0' cellspacing='0' style='height:" + BarraAltura + "; border-collapse: collapse;border:1px solid black; background-color:#FFFFFF;' id='" + idtabela + "'></table>");
    elemento.appendChild(tabela);
    Tabela_Base = document.getElementById(idtabela);
    var Linha   = Tabela_Base.insertRow();
    if (celulas>1) {    
        for (i=0;i<celulas;i++){

            var celula1 = Linha.insertCell();
            celula1.id = "cel_" + i.toString();
            celula1.style.width = Tamanho.toString() + "%";
            if ((i % 2) == 0) {
                celula1.style.backgroundColor ="red";
                celula1.style.border = "0px solid black";
                }
            else {
                celula1.style.backgroundColor ="white";
                celula1.style.border = "1px solid black";
                }
            }    
        }
    else {
        var celula1 = Linha.insertCell();
        celula1.id = idlinha;
        celula1.style.backgroundColor ="red";
        }    
    }

Algém poderia me ajudar a interromper a barra ao final das iterações? Ou alguém conhece outra solução para o problema?

Já criei algumas variáveis booleanas para tentar controlar o fluxo da barra, mas não consigo.

Allan Rodrigo · Janeiro 23, 2008

opa Lamenza...

beleza???

você quer parar a barra após carregada, é isso né??

tenta assim:

...
function BarraAvanco(el_Ancora,el_Tabela,el_Barra,aArg){
    window.status="Carregando...";
    BarraCarregada++;
    if(BarraCarregada<0)BarraCarregada=0;
    if(BarraCarregada>=BarraTempo*10){
        clearInterval(Pid);
        BarraCarregada=BarraTempo*10;
    return
        //BarraOculta(el_Ancora,el_Tabela,el_Barra,aArg);
        }
    BarraRedimensiona(el_Barra, 0, BarraIndicador*BarraCarregada, BarraAltura-2, 0);
    }
...

observe que ao invés de ocultar a barra, tem um return....

era isso???

flow...abraço

Lamenza · Janeiro 24, 2008

Caro Allan,

Nessa solução há um probema. A barra de progresso, ao final de seu avanço, executa uma rotina. É essa rotina que executa a tarfefa principal de minha aplicação. Ocorre que a solução apresentada por você - ao eliminar a chamada da função BarraOculta() - deixa-se de chamar a rotina principal. O quarto argumento da função BarraOculta() - aArg - é um array com os argumentos da função principal.

A barra de progresso leva um tempo para ser executada. Nesse intervalo de tempo eu pretendia pausar a execução do código na página chamadora - pai - enquanto a página chamada - filho - executasse sua tarefa. Ao final do tempo da barra de progresso, a página pai continuaria processando a função, mandando novo lote de informações para a página filho, sempre após o tempo da barra.

Entrar

Pause com barra de progresso

Pergunta

Lamenza

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

Allan Rodrigo

Link para o comentário

Compartilhar em outros sites

Lamenza

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades