Calling Jquery function inside a For loop

Question

Calling Jquery function inside a For loop

Navigation

#1 by (3 votes)

1

$("#divOpcoes").fadeOut(500, function () { $(this).text('Opção ' + indiceAtual + ".").fadeIn(500); })

The above line is inside a for loop and variable "Current index" is incremented each loop loop. My problem is: the function passed to fadeOut is only executed after the whole loop ends, and my result is: for all the indiceAtual passes it receives the last value passed by the loop, but the expected result is that every pass through loop the value is that of the current index.

EDIT1

A little more of my code:

Running without animation:

            if (nextLabel != null) {
                $("#divOpcoes").find("#lbOpcao" + (indiceAtual + 1)).text('Opção ' + indiceAtual + ".").attr('for', 'Opcao' + indiceAtual).attr('id', 'lbOpcao' + indiceAtual);
                $("#divOpcoes").find("#divOpcao" + (indiceAtual + 1)).attr('id', 'divOpcao' + indiceAtual);
                $("#divOpcoes").find("#Opcao" + (indiceAtual + 1)).attr('id', 'Opcao' + indiceAtual);
                $("#divOpcoes").find("#btn" + (indiceAtual + 1)).prop('onclick', null).off('click').attr('onclick', "excluirOpcao(" + indiceAtual + ")" ).attr('id', 'btn' + indiceAtual);
            }

With animation, but placing all indices equal:

            if (nextLabel != null) {
                $("#divOpcoes").find("#lbOpcao" + (indiceAtual + 1)).fadeOut(500, function () { $(this).text('Opção ' + indiceAtual + ".").fadeIn(500); }).attr('for', 'Opcao' + indiceAtual).attr('id', 'lbOpcao' + indiceAtual);
                $("#divOpcoes").find("#divOpcao" + (indiceAtual + 1)).attr('id', 'divOpcao' + indiceAtual);
                $("#divOpcoes").find("#Opcao" + (indiceAtual + 1)).attr('id', 'Opcao' + indiceAtual);
                $("#divOpcoes").find("#btn" + (indiceAtual + 1)).prop('onclick', null).off('click').attr('onclick', "excluirOpcao(" + indiceAtual + ")" ).attr('id', 'btn' + indiceAtual);
            }

Applying setTimeout (did not work nor returned error in console):

        if (nextLabel != null) {
            setTimeout(function () {
                $("#divOpcoes").find("#lbOpcao" + (indiceAtual + 1)).fadeOut(500, function () { $(this).text('Opção ' + indiceAtual + ".").fadeIn(500); }).attr('for', 'Opcao' + indiceAtual).attr('id', 'lbOpcao' + indiceAtual);
                $("#divOpcoes").find("#divOpcao" + (indiceAtual + 1)).attr('id', 'divOpcao' + indiceAtual);
                $("#divOpcoes").find("#Opcao" + (indiceAtual + 1)).attr('id', 'Opcao' + indiceAtual);
                $("#divOpcoes").find("#btn" + (indiceAtual + 1)).prop('onclick', null).off('click').attr('onclick', "excluirOpcao(" + indiceAtual + ")").attr('id', 'btn' + indiceAtual);
            }, 500+(i*1000));
        }

EDIT2

My entire function:

function reordenarOpcoes() {
    for (i = 1; i <= $("#idOpcao").val() ; i++) {

        var label = $("#divOpcoes").find("#lbOpcao" + i).val();
        if (label == null) {
            var nextLabel = $("#divOpcoes").find("#lbOpcao" + (i + 1)).val();

            if (nextLabel != null) {
                $("#divOpcoes").find("#lbOpcao" + (i + 1)).text('Opção ' + i + ".").attr('for', 'Opcao' + i).attr('id', 'lbOpcao' + i);  // .fadeOut(500, function () { $(this).text('Opção ' + indiceAtual + ".").fadeIn(500); }).attr('for', 'Opcao' + indiceAtual).attr('id', 'lbOpcao' + indiceAtual);
                $("#divOpcoes").find("#divOpcao" + (i + 1)).attr('id', 'divOpcao' + i);
                $("#divOpcoes").find("#Opcao" + (i + 1)).attr('id', 'Opcao' + i);
                $("#divOpcoes").find("#btn" + (i + 1)).prop('onclick', null).off('click').attr('onclick', "excluirOpcao(" + i + ")").attr('id', 'btn' + i);
            }
        }
    }
}

jquery

asked by anonymous 09.05.2018 / 14:02

1 answer

Calculation of occurrence of strings in list - Python How to retrieve data from a SUM with where different?

score 3 · Accepted Answer

You will achieve this by using a function with setTimeout , where each pass in the loop will set a time of 1 second over (1 second = sum of fadeOut(500) and fadeIn(500) ), ie in 1st pass the delay will be 500ms, in the 2nd of 1500ms, in the 3rd of 2500ms and so on.

Otherwise I do not think it's possible because the loops ( for , while , each ) are asynchronous with your content and will return the last operation processed.

Using setTimeout , you can create a delay with 1-second intervals that will render the function with the effects fadeOut and fadeIn .

Example:

var indiceAtual = 0;
for(var x = 0; x < 10; x++){
   (function(x){
      setTimeout(function(){
         $("#divOpcoes").fadeOut(500, function(){
            $(this).text('Opção ' + (x+1) + ".").fadeIn(500);
         });
      }, 500+(x*1000));
   }(x));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="divOpcoes">Opção 0.</div>

With while

var indiceAtual = 0;
while(indiceAtual < 10){
   (function(x){
      setTimeout(function(){
         $("#divOpcoes").fadeOut(500, function(){
            $(this).text('Opção ' + (x+1) + ".").fadeIn(500);
         });
      }, 500+(x*1000));
   }(indiceAtual));
   indiceAtual++;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="divOpcoes">Opção 0.</div>