javascript - 项目未添加到数组中？

Question

所以这应该非常简单，但我不知道出了什么问题。

    var imageColors = [];

    $('.portfolio-image').each(function(index, el) {
        RGBaster.colors(this, {
          success: function(payload) {
            console.log(payload.dominant);
            imageColors.push(payload.dominant);
          }
        });
    });

    $('.portfolio-title').each(function(index, el) {
        $(this).css('color', 'imageColors[index]');
    });

});

所以上面的代码有一个数组，它应该存储一组图像中的颜色。然后，我们循环浏览一些文本，并将文本颜色按照每个图像可见的顺序设置为主色。

无论如何，问题是无论我如何向 imageColors 数组“添加”某些内容，其中都没有任何内容。当我运行数组长度的 console.log 时，它始终为 0。那么有人可以解释为什么没有添加任何内容吗？

Answer 1

由于您有一个 success 回调传递给 colors 插件，它看起来像一个异步方法，这意味着当第二个每个 block 执行时，数组可能不会被填充所需的数据。

这里的一个解决方案是在回调中设置颜色CSS，例如

var imageColors = [];
var $titles = $('.portfolio-title');
$('.portfolio-image').each(function (index, el) {
    RGBaster.colors(this, {
        success: function (payload) {
            imageColors.push(payload.dominant);
            $titles.eq(index).css('color', payload.dominant);
        }
    });
});