javascript - jquery 无法设置变量

Question

我有一个代码，从数据库获取信息后，它应该将变量 newcolorid 设置为从数据库获取的 id。正如你所看到的，我在函数之前定义了变量，但是在设置新的 id 之后，它仍然保持不变。基本上在控制台中我看到了新的 id，但是在函数完成后，它会将其恢复为 0。可能是什么问题？

var newcolorid = 0;

$.ajax({
    url: "/colors",
    dataType: "json",
    success: function(data) {
        var newcolors = [];
        jQuery.each(data.colors, function (i, elem){
            newcolors.push([elem.color_code, elem.label, elem.id]);
        });
        for(var i=0;i<newcolors.length;i++){
            if(newcolors[i][1]==label){
                newcolorid = newcolors[i][2];
                console.log(newcolorid);
                break;
            }
        }
    }
});

for (var i = 0; i < spectrums.length; i++) {
    if (spectrums[i]) {
        var spectrumPalette = spectrums[i].option("palette");
        spectrumPalette.push([[rgb, label, newcolorid]]);
        spectrums[i].option("palette", spectrumPalette);
    }
}

Answer 1

这是因为你的循环是在后端返回值之前执行的，所以当它运行时，值没有改变。

后端调用是异步的(除非另有设置)，这意味着它们不会阻止脚本其余部分的执行，并在收到后端回复时执行。

如果您想使用新值或将该代码移动到从成功回调调用的函数中，则需要将代码移动到成功回调中。

var newcolorid = 0;

$.ajax({
    url: "/colors",
    dataType: "json",
    success: function(data) {

        var newcolors = [];

        jQuery.each(data.colors, function (i, elem){
            newcolors.push([elem.color_code, elem.label, elem.id]);
        });

        for(var i = 0; i<newcolors.length; i++){
            if(newcolors[i][1]==label){
                newcolorid = newcolors[i][2];
                console.log(newcolorid);
                break;
            }
        }

        for (i = 0; i < spectrums.length; i++) {
            if (spectrums[i]) {
                var spectrumPalette = spectrums[i].option("palette");
                spectrumPalette.push([[rgb, label, newcolorid]]);
                spectrums[i].option("palette", spectrumPalette);
            }
        }
    }
});