1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Lopping each() sendo executado sem sincronia - jQuery

Discussion in 'Technology' started by JHenry, Oct 8, 2018.

  1. JHenry

    JHenry Guest

    Estou criando um site tipo Pinterest e os comandos abaixo pega a resposta (resposta = post em formato html) da própria chamada ajax e apende o post na tela.

    Os comandos abaixo verifica qual div/coluna tem o menor height e faz o append na menor.

    success: function(response) {

    var arr_col_min = [];

    var var_num_of_col = get_num_of_col_by_width();

    $.each(response, function(key, val) {


    for (let idx = 0; idx<=var_num_of_col; idx++) {

    arr_col_min[idx] = $('div#col_'+idx).height();

    }

    var obj_col_min = {
    key: 0,
    val: arr_col_min[0]
    };


    for (let idx = 0; idx<=var_num_of_col; idx++) {

    if(arr_col_min[idx] < obj_col_min.val) {

    obj_col_min.key = idx;
    obj_col_min.val = arr_col_min[idx];

    }

    }

    $('div#col_'+obj_col_min.key).append(val);

    });

    }


    O problema é que as vezes esses comandos funcionam corretamente as vezes não.

    As vezes funcionam assim, como o esperado:

    01,02,03,04,05
    06,07,08,09,10
    11,12,13,14,15


    E as vezes funciona tipo assim:

    01,02,03,04,05
    06,07
    08
    09
    10
    11


    Isso acontece porque o jQuery não reconheceu (ou pelo menos não teve tempo de reconhecer) que os novos posts foram apendidos na segunda coluna e que portanto ela não é qual tem o menor height. Então ele vai enchendo de post na segunda.

    Agora vejamos os comandos por partes...

    1 - A variavel arr_col_min ira receber o height de cada div/coluna. 2 - A variavel var_num_of_col conta quantas colunas tem na tela (é porque o sistema é responsível).

    var arr_col_min = [];

    var var_num_of_col = get_num_of_col_by_width();


    3 - Response é um array em PHP. Key é simplesmente 0, 1, 2, 3... E val é o post em formato html (basicamente é uma imagem dentro duma div). Está configurado um looping $.each porque, para cada post, os codigos a seguir irão verificar qual coluna tem o menor height e fazer o append na menor. A cada post essa verificação é executada (ou deveria).

    $.each(response, function(key, val) {


    4 - Esse looping pega cada height das colunas na tela e atribui ele na variavel arr_col_min.

    for (let idx = 0; idx<=var_num_of_col; idx++) {

    arr_col_min[idx] = $('div#col_'+idx).height();

    }


    5 - Essa variavel em formato de objeto foi criada pra receber o post o indice do mesmo que tem o menor tamanho.

    var obj_col_min = {
    key: 0,
    val: arr_col_min[0]
    };


    6 - Esse looping verifica se a coluna em questão (arr_col_min[idx]) é menor do que a coluna em obj_col_min. Se for, o objeto obj_col_min é atribuido com o valor da altura e também com o indice.

    for (let idx = 0; idx<=var_num_of_col; idx++) {

    if(arr_col_min[idx] < obj_col_min.val) {

    obj_col_min.key = idx;
    obj_col_min.val = arr_col_min[idx];

    }

    }


    7 - Abaixo é executado o append na coluna que tem o menor tamanho que é dado pelo indice do objeto obj_col_min.

    $('div#col_'+obj_col_min.key).append(val);


    É assim que funciona, ou como deveria funcionar...

    Login To add answer/comment
     

Share This Page