Jump to content
cviniciussdias

Por que ações executadas dentro de loops são realizadas depois das dem

Recommended Posts

Por que, se eu adiciono um código dentro de um loop (for, por exemplo), as ações dentro dele são executadas após o que está fora?

Por exemplo, o seguinte script:

(function () {
    var i, teste = document.getElementById("teste");
    teste.innerHTML = "<ul>";
    for (i = 0; i < 5; i++) {
        teste.innerHTML += "<li>Teste " + i + "</li>";
    }
    teste.innerHTML += "</ul>";
})();

Esse bloco de código me gera essa saída:

<ul></ul><li>Teste 0</li><li>Teste 1</li><li>Teste 2</li><li>Teste 3</li><li>Teste 4</li>

O que está em volta do for, é executado primeiro. Só depois, o que está dentro do for é realizado.

Existe uma possibilidade de resolver isso?

Sei que nesse caso, eu poderia criar o elemento ul, e com appendChild inserir os elementos li, mas, esse foi só um exemplo do meu problema.

 

Desde já, grato!

Share this post


Link to post
Share on other sites

Não cara.. nesse caso do exemplo isso ai não acontece não.

O que vem depois do loop espera o loop acabar.

 

Qual foi o caso real em que vc notou o erro ? no código acima, essa situação não acontece.

Share this post


Link to post
Share on other sites

Fala Vinicius o que acontece é o seguinte

 

 

Ao inserir o <ul> ( teste.innerHTML = "<ul>"; ) o dom automaticamente identifica como um elemento e o fecha.

E outro ponto é que você está adicionando o <li> ( teste.innerHTML += "<li>Teste " + i + "</li>"; ) na div pai do <ul> e não nele;

 

O certo seria algo assim:

var i, teste = document.getElementById("entry2172473");
    teste.innerHTML = "<ul id='ListTest'>";
    lista = document.getElementById('ListTest');
    for (i = 0; i < 5; i++) {
        lista.innerHTML += "<li>Teste " + i + "</li>";
    }

Se rodar esse código no console deste tópico verá o resultado;

  • +1 1

Share this post


Link to post
Share on other sites

Não cara.. nesse caso do exemplo isso ai não acontece não.

O que vem depois do loop espera o loop acabar.

 

Qual foi o caso real em que você notou o erro ? no código acima, essa situação não acontece.

 

William, no exemplo, era exatamente o que acontecia. Você não deve nem ter testado...

Obrigado mesmo assim.

:-)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By gersonab
      Bom dia, utilizo um sistema de auto complete que funciona quase que perfeitamente, porque quase, se eu tenho 10 Marias cadastradas o autocomplete só inicia após eu colocar uma letra do segundo nome e ou sobrenome, tipo :
      se eu escrever Maria somente, não aparece opções na lista;
      agora se eu escrever Maria A - ja começa a aparecer opções na lista;
      tem como iniciar as opções após uma terceira letra digitada ?
      segue o código que utilixo.
      form
      <label class="field"> <input type="text" name="nomec" id="nomec" class="gui-input"> <input type="hidden" name="idc" id="idc"> </label> ajax
      $( "#nomec" ).autocomplete({ source: function( request, response ) { $.ajax({ url: "../lista/autocli.php", type: 'post', dataType: "json", data: { search: request.term }, success: function( data ) { response( data ); } }); }, select: function (event, ui) { $('#nomec').val(ui.item.label); $('#idc').val(ui.item.value); return false; } }); autocli.php
      require_once('config.php'); if(isset($_POST['search'])){ $search = $_POST['search']; $query = "SELECT DISTINCT nomec AS nomec, idc FROM cli WHERE nomec like'%".$search."%'"; $result = mysqli_query($con,$query); $response = array(); while($row = mysqli_fetch_array($result) ){ $response[] = array("value"=>$row['idc'],"label"=>$row['nomec']); } echo json_encode($response); } exit; desde já agradeço.
       
    • By Rodrigo Biaggio
      Senhores(a), por favor, alguém consegue me ajudar a entender como posso fazer para colocar o conteúdo abaixo, dentro de uma DIV, separando ou criando como se fosse uma tabela com o campo HostGroup e Licenças? 
       
      {"GFUnificado":14,"APIGateway":22,"OSBSegregado1":202,"Portal":14,"OAM":30,"MicroServicos":68,"Loja":58.5,"60-Lojas":46,"-Callcenter":37,"360-Dealers":24,"SOAMecsol":30,"MeuEmpresas":40,"OSBFarm4":89,"Prisma":8,"EricssonRevenueManager":50.75,"N":80,"Atl":10,"OSBEAI":2,"Next":208.5}
       
      Segue meu código:
       
      <!DOCTYPE html> <html lang="pt-br"> <title>API Management</title> <head> <meta charset="8"> </head> <body> <script> var urlapi = 'http://xxxxx.xxxx; function fazerRequisicao(){ var url = urlapi + document.getElementById('hostgroup').value; //var url = urlapi; var xhttp = new XMLHttpRequest(); xhttp.open("GET", url, false); xhttp.send(); var obj = JSON.parse(xhttp.responseText); var data_map = new Map(); var index = 0; for (i = 0; i < obj.length; i++) { if(data_map.has(obj[i].hostGroup.name)) { data_map.set(obj[i].hostGroup.name, data_map.get(obj[i].hostGroup.name) + +obj[i].consumedHostUnits); } else { data_map.set(obj[i].hostGroup.name, +obj[i].consumedHostUnits); } } const objConverted = Object.fromEntries(data_map); var myJSON = JSON.stringify(objConverted); document.getElementById("div-responsetext").innerHTML = myJSON; } var len = myJSON.hostGroup.name.length, aryHostGroup = []; </script> <button onclick="fazerRequisicao();">Pesquisar</button> <input type="text" id="hostgroup" style="width: 100px;"> <hr/> <div id="div-responsetext"></div> </body> </html>  
       
    • By Luiz Henrique de Sousa
      Boa noite habilitei meu required, para quando o campo B da minha picklist estiver vazio ele não poder salvar, adicionei uma mensagem no meu Bean e já tentei requiredMessage e validatorMassage e nada , mas fica me retornando a mensagem padrão do richfaces do mesmo jeito, OBS: fora a mensagem padrão do richfaces ele me retorna o componente da form frEditForm:colunaCustomizada Erro de validação: o valor é necessário.
       
      Código:
       
      <h:outputLabel for="colunaCustomizada" value="#{messages.colunas_selecionadas}" /> <rich:pickList id="columnCustomization" value="#{defaultMBean.colunasSelecionadas}" var="colunas" sourceCaption="#{messages.colunasDisponiveis}" targetCaption="#{messages.selecionarColunas}" addAllText="#{messages.coluna_addall}" addText="#{messages.coluna_add}" removeAllText="#{messages.coluna_removeall}" removeText="#{messages.coluna_remove}" listHeight="310px" required="true" orderable="true" downText="" downBottomText="" upText="" upTopText="" itemClass="rf-pick-item"> <rich:message for="colunaCustomizada"> </rich:message>  
      Ajax, JS..
       
      <a4j:jsFunction name="validateRequiredFields" action="#{defaultMBean.validarCamposObrigatorios(nome, produto, dataFormato, colunaDataSelecionada)}" oncomplete="btnSaveClick()" reRender="pnlMenssagem"> <a4j:param name="param" assignTo="#{nome}"/> <a4j:param name="param1" assignTo="#{produto}"/> <a4j:param name="param2" assignTo="#{dataFormato}"/> <a4j:param name="param3" assignTo="#{colunaDataSelecionada}"/> </a4j:jsFunction> <script type="text/javascript" language="JavaScript"> /*<![CDATA[*/ initializeTemplatePickList(true); $("#ngEditForm\\:btnSave").bind('mousedown', function(event){ this.focus(); var array = assembleChanges(); saveChanges(array); validateRequiredFields( $("#frEditForm:\\:fldNome").val(), $("#frEditForm:\\:fldTipo option:selected").val(), $("#frEditForm:\\:fldDataFormato").val(), templateColumnPicklist.getcolunaDataSelecionada() ); }); function btnSaveClick() { if($('#pnlMenssagem').length == 0) { $("#ngEditForm\\:btnSalvar").click(); } }
    • By Thiago Franchin
      Pessoal gravei esse tutorial de Gastby.js, espero que gostem: 
       
       
    • By alysson122010
      Galera tenho esse codigo e gostaria que as impressao das latitudo e longitudo aparecesse em dois inputs diferentes para depois eu manda para um banco de dados com um insert.
       
      meu codigo:
      <p id="demo"></p> <body onload="getLocation()"> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="O seu navegador não suporta Geolocalização.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script> </body>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.