Question

我正在尝试在forEach块完成执行后记录我的colors变量。

由于代码现在它只是返回一个空数组。我想我在适当的时候不是控制台。但是我很困惑应该什么时候发生。

基本上，我需要的是能够使用我的颜色数组来执行其他功能。但在我这样做之前，我必须确保createParentComponent函数已完成执行。

提前致谢！

    var colors = [];

    function createParentComponent(array){
    var count = 0;

    array.forEach(function(image){
       var parent = document.createElement('div');
       parent.style.height = '50px';
       parent.style.width = '50px';
       parent.className = 'parent';

       var imgData = createImgandColorDiv(image);
       var img = imgData[0];
       var cdiv = imgData[1];

       parent.appendChild(img);
       parent.appendChild(cdiv);
       document.getElementById('container').appendChild(parent);
       count ++;
       console.log(count);
    });

    if(count === array.length){console.log(colors);}

}

function createImgandColorDiv(url){
    var img = document.createElement('img');
    img.style.height = '50px';
    img.style.width = '50px';

    var cdiv=document.createElement('div');
    cdiv.style.height = '50px';
    cdiv.style.width = '50px';
    cdiv.className = 'cdiv';

    img.onload = function(){
        var hsl = getDominantHSLColor(img);
        colors.push(hsl);
        cdiv.style.backgroundColor = 'hsl('+hsl[0]+','+hsl[1]+'%,'+hsl[2]+'%)';
    };

    img.src = url;
    return [img, cdiv]; 
}

我试图从this激励自己。

Answer 1

您在count和createParentComponent（forEach）中使用的匿名内部函数中声明了var count = imgData[2];变量。

由于你无法增加（++），最终只有count，NaN。

我建议~~重命名内部count变量~~完全删除内部count变量，因为createImgandColorDiv只返回两个值。：）

Answer 2

我最终这样做，所以将我的条件添加到我的createImgandColorDiv：

function createImgandColorDiv(url){
    var img = document.createElement('img');
    img.style.height = '50px';
    img.style.width = '50px';

    var cdiv=document.createElement('div');
    cdiv.style.height = '50px';
    cdiv.style.width = '50px';
    cdiv.className = 'cdiv';

    img.onload = function(){
        var c = document.getElementsByClassName('cdiv');
        var hsl = getDominantHSLColor(img);
        colors.push(hsl);
        cdiv.style.backgroundColor = 'hsl('+hsl[0]+','+hsl[1]+'%,'+hsl[2]+'%)';
        if(colors.length===c.length){console.log(colors)};
    };

    img.src = url;
    return [img, cdiv]; 
}

我愿意听到更好的方法来写这个：）

何时应该执行回调

2 个答案: