jquery each() 循环中的异步函数

Question

我在 Javascript/Jquery 中为每个选中的复选框运行了一个循环。

在这个循环中，我调用了一个异步函数，该函数将返回一个 Tile Layer(Image)。 我必须向这个函数传递一个名为 checkboxPermanent 的参数。 调用此函数后，变量 checkboxPermanent 改变了它的值，不知道为什么。 在序列中，它调用了一个类似的函数，但现在传递了相同的变量，但参数值错误。

$('#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'
                }
            });
        })

如果我在 wmswmsPermRasterCall() 之前 console.log(checkboxPermanent)。 它将返回正确的值。 如果我在调用 wmswmsPermRasterCall() 后立即 console.log(checkboxPermanent)，它会得到一个不同的值..

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',
            })
        }

    }

我在这里错过了什么？

Answer 1

在这里查看：

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

此函数是异步的，它将在您的函数之外运行，您的代码将在wmsPermRasterCall 完成之前继续运行。

您需要使用 await 等待 wmsPermRasterCall 的结果：

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

您的代码将暂停直到 wmsPermRasterCall 完成。