Why doesn’t the event end?

Question

Why doesn’t the event end?

Asked 7 years, 9 months ago

Viewed 66 times

3

I created a code with javascript, but it didn’t run very well. I am creating a page loading, but it does not load the load bar and the event I programmed never ends. It was in the infinite loop:

var progresso = new Number();
var maximo = new Number();
var progresso=0;
var maximo = 100;
function start(){
    if((progresso + 1) < maximo){
      progresso=progresso+1;
      document.getElementById("pg").value=progresso;
      setTimeout("start();",80);
    }
}

#barra_progresso
{
  FONT-SIZE: 1px;
  LEFT: 0px;
  WIDTH: 1px;
  POSITION: relative;
  TOP: 1px;
  HEIGHT: 5px;
  BACKGROUND-COLOR: #006400
}
#carregador_pai
{
  WIDTH: 100%;
  POSITION: absolute;
  TOP: 40%;
  TEXT-ALIGN: center
}
#carregador_fundo
{
  FONT-SIZE: 1px;
  LEFT: 9px;
  WIDTH: 113px;
  POSITION: relative;
  TOP: 8px;
  HEIGHT: 7px;
  BACKGROUND-COLOR: #ebebe4
}
#carregador
{
  BORDER-RIGHT: #6a6a6a 1px solid;
  PADDING-RIGHT: 0px;
  BORDER-TOP: #6a6a6a 1px solid;
  DISPLAY: block;
  PADDING-LEFT: 0px;
  FONT-SIZE: 11px;
  Z-INDEX: 2;
  PADDING-BOTTOM: 16px;
  MARGIN: 0px auto;
  BORDER-LEFT: #6a6a6a 1px solid;
  WIDTH: 130px;
  COLOR: #000000;
  PADDING-TOP: 10px;
  BORDER-BOTTOM: #6a6a6a 1px solid;
  FONT-FAMILY: Tahoma, Helvetica, sans;
  BACKGROUND-COLOR: #ffffff;
  TEXT-ALIGN: left
}

<div id="carregador_pai">
  <div id="carregador">
    <div align="center">Aguarde carregando...</div>
    <div>
      <center> 
        <p>
          <progress id="pg" max="100"></progress>       
        </p>
      </center>
    </div>
  </div>
</div>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg" height="720" width="1024"  />

You have a large part of Javascript as a comment (or is disabled). The declaration of that variable _loadTimer that the error refers is there... why not "de-comments" that code?

– Sergio

2017/02/18 at 15:48
Sorry, I entered another code! Disregard only.

– user67202

2017/02/18 at 17:01

1 answer

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.

by Woss • **73,416** points · Answer 1 · 2017-02-18T20:11:36+00:00

First, the function of start It’s not called at any point in its code, so it doesn’t even begin to execute. Assuming the "upload" should start along with the page, I will call you through the event onload. Another error in the code is calling "start();" with setTimeout. The notation with string works when you make the call through a property in HTML, as occurs in the event onload. In this case, you are working directly on Javascript, so just pass only the function name, no quotes. Finally, considering that the progress bar should disappear after finishing the count, I inserted in the function start the clause else, hiding the progress bar as soon as the count ends.

Besides, it doesn’t make much sense to do:

var progresso = new Number();
var maximo = new Number();
var progresso=0;
var maximo = 100;

You would be declaring the two variables twice, the second overwriting the first. You can just do:

var progresso = new Number(0);
var maximo = new Number(100);

Or else

var progresso = 0;
var maximo = 100;

In which case it works perfectly.

I hope that’s the problem. If not, edit the question and try to be more clear about your need.

var progresso = 0;
var maximo = 100

function start() {
  if ((progresso + 1) < maximo) {
    progresso = progresso + 1;
    document.getElementById("pg").value = progresso;
    setTimeout(start, 80);
  } else {
    document.getElementById("carregador_pai").style.display = 'none';
  }
}

#barra_progresso {
  FONT-SIZE: 1px;
  LEFT: 0px;
  WIDTH: 1px;
  POSITION: relative;
  TOP: 1px;
  HEIGHT: 5px;
  BACKGROUND-COLOR: #006400
}

#carregador_pai {
  WIDTH: 100%;
  POSITION: absolute;
  TOP: 40%;
  TEXT-ALIGN: center
}

#carregador_fundo {
  FONT-SIZE: 1px;
  LEFT: 9px;
  WIDTH: 113px;
  POSITION: relative;
  TOP: 8px;
  HEIGHT: 7px;
  BACKGROUND-COLOR: #ebebe4
}

#carregador {
  BORDER-RIGHT: #6a6a6a 1px solid;
  PADDING-RIGHT: 0px;
  BORDER-TOP: #6a6a6a 1px solid;
  DISPLAY: block;
  PADDING-LEFT: 0px;
  FONT-SIZE: 11px;
  Z-INDEX: 2;
  PADDING-BOTTOM: 16px;
  MARGIN: 0px auto;
  BORDER-LEFT: #6a6a6a 1px solid;
  WIDTH: 130px;
  COLOR: #000000;
  PADDING-TOP: 10px;
  BORDER-BOTTOM: #6a6a6a 1px solid;
  FONT-FAMILY: Tahoma, Helvetica, sans;
  BACKGROUND-COLOR: #ffffff;
  TEXT-ALIGN: left
}

<body onload="start()">
  <div id="carregador_pai">
    <div id="carregador">
      <div align="center">Aguarde carregando...</div>
      <div>
        <center>
          <p><progress id="pg" max="100"></progress> </p>
        </center>
      </div>
    </div>
  </div>
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg" height="720" width="1024" />
</body>