I have a loop running for each selected checkbox in Javascript / Jquery.

Inside this loop I call an async function that will return a Tile Layer(Image). I have to pass to this function a parameter called checkboxPermanent. After this function is called the variable checkboxPermanent changes its value, not sure why. In the sequence it calls a similiar function but now passing the same variable but with the wrong parameter value.

$('#exec-perm').on('click',  function () {
            var checkboxPermanent;
            $('#checks-perm input').each(async function () {
                checkboxPermanent = $(this).attr('value');
                isChecked = $(this).prop('checked');
                permanent = permanent_layers[checkboxPermanent]   // começa com valor undefined, no próximo loop passa a conter um objeto para que possa cair na codição 1
                pixel_permanent = pixel_permanent_layers[checkboxPermanent]
                if (permanent) {
                    if (!isChecked) {
                        map.removeLayer(permanent)
                        map.removeLayer(pixel_permanent)
                        ctrlLayers.removeLayer(permanent)
                        ctrlLayers.removeLayer(pixel_permanent)
                    } else if (isChecked && state_faz == faz_value && state_ano_safra == ano_safra_value && state_profundidade == profundidade_value) {
                        //map.addLayer(permanent)
                        //map.addLayer(pixel_permanent)
                        map.removeLayer(permanent)
                        map.removeLayer(pixel_permanent)
                        ctrlLayers.removeLayer(permanent)
                        ctrlLayers.removeLayer(pixel_permanent)
                        ctrlLayers.addOverlay(permanent, 'Mapa de '   checkboxPermanent);
                        ctrlLayers.addOverlay(pixel_permanent, 'Mapa de '   checkboxPermanent   ' - Pixels');
                    } else if (isChecked && (state_faz != faz_value || state_ano_safra != ano_safra_value || state_profundidade != profundidade_value)) {
                        map.removeLayer(permanent)
                        map.removeLayer(pixel_permanent)
                        ctrlLayers.removeLayer(permanent)
                        ctrlLayers.removeLayer(pixel_permanent)
                        permanent = wmsPermRasterCall(checkboxPermanent, faz_value, profundidade_value);
                        pixel_permanent = wmsPixelPermCall(checkboxPermanent, faz_value, profundidade_value);
                        permanent_layers[checkboxPermanent] = permanent; // armazena o valor  no array para que possa cair na condicional que irá excluir os layers do control
                        pixel_permanent_layers[checkboxPermanent] = pixel_permanent;
                        //map.addLayer(permanent);
                        //map.addLayer(pixel_permanent);
                        ctrlLayers.addOverlay(permanent, 'Mapa de '   checkboxPermanent);
                        ctrlLayers.addOverlay(pixel_permanent, 'Mapa de '   checkboxPermanent   ' - Pixels');
                    }
                } else if (isChecked) {
                    console.log(checkboxPermanent)
                    permanent = wmsPermRasterCall(checkboxPermanent, faz_value, profundidade_value);
                    console.log(permanent)
                    pixel_permanent = wmsPixelPermCall(checkboxPermanent, faz_value, profundidade_value);
                    //console.log(checkboxPermanent)
                    permanent_layers[checkboxPermanent] = permanent; // armazena o valor  no array para que possa cair na condicional que irá excluir os layers do control
                    pixel_permanent_layers[checkboxPermanent] = pixel_permanent;
                    //map.addLayer(permanent);
                    //map.addLayer(pixel_permanent);                        
                    ctrlLayers.addOverlay(permanent, 'Mapa de '   checkboxPermanent);
                    ctrlLayers.addOverlay(pixel_permanent, 'Mapa de '   checkboxPermanent   ' - Pixels');
                }
                if (checkboxPermanent == 'altimetria') {
                    leg_permanent[checkboxPermanent] = 'Emp:'   checkboxPermanent   '_'   faz_value
                    leg_pixel_permanent[checkboxPermanent] = 'Emp:mv_'   checkboxPermanent   '_sql'
                } else {
                    leg_permanent[checkboxPermanent] = 'Emp:'   checkboxPermanent   '_'   faz_value   '_p'   profundidade_value
                    leg_pixel_permanent[checkboxPermanent] = 'Emp:mv_'   checkboxPermanent   '_sql'
                }
            });
        })

If I console.log(checkboxPermanent) before wmswmsPermRasterCall(). It will return the right value. If I console.log(checkboxPermanent) right after wmswmsPermRasterCall() is called it gets a different value..

async function wmsPermRasterCall(checkboxPermanent, faz_value, profundidade_value) {
        //var colorRampSLD = getStyles(faz_value, checkboxPermanent)

        if (checkboxPermanent == 'altimetria') {
            var raster_name = checkboxPermanent   '_'   faz_value
            getColors = await getStyles(faz_value, checkboxPermanent)
            var colorEnv = '';

            for (var j = 0; j < getColors.length; j  ) {
                if (j   1 >= getColors.length) {
                    colorEnv  = 'c'   j   ':'   getColors[j]
                } else {
                    colorEnv  = 'c'   j   ':'   getColors[j]   ';'
                }
            }

            return L.tileLayer.wms('http://localhost:8080/geoserver/Emp/wms', {
                layers: 'Emp:'   raster_name,
                transparent: true,
                format: 'image/png',
            }).setParams({
                env: colorEnv
            })
        } else {
            return L.tileLayer.wms('http://localhost:8080/geoserver/Emp/wms', {
                layers: 'Emp:'   checkboxPermanent   '_'   faz_value   '_p'   profundidade_value,
                transparent: true,
                format: 'image/png',
            })
        }

    }

What Am I missing here?

CodePudding user response：

Check here:

 console.log(checkboxPermanent)
 permanent = wmsPermRasterCall(checkboxPermanent, faz_value,  profundidade_value);
 console.log(permanent)

This function is async, it will run outside of your function, your code will continue before wmsPermRasterCall is finished.

You need to wait for the result of wmsPermRasterCall using await:

 console.log(checkboxPermanent)
 permanent = await wmsPermRasterCall(checkboxPermanent, faz_value,  profundidade_value);
 console.log(permanent)

Your code will halt until wmsPermRasterCall is finished.