使用setTimeout遍历数组的JavaScript循环运行到未定义的拆分中

因此，我有一个wordpress页面，它运行一个页面，用户可以创建一个小漫画，生成3幅代表漫画的图像

用户可以定制角色头发、眼睛、t恤，从5个场景中选择，然后再选择3个场景结束

…最终的输出是3幅图像，或者更确切地说是3块由许多分层png组成的面板-分层图像当然是所选的头发、眼睛、t恤衫等加上任何场景选择的背景

这个分层的图像集需要成为一个可共享的图像，所以我决定使用html2canvas来呈现所有可能的图像，这些图像可以从1260个选项的组合中创建

我正在尝试提前生成所有这些图像，因为html2canvas对于实时使用来说有点不稳定，所以我正在尝试以编程的方式来实现这一点

图像生成在我的1260个可能组合的数组中运行，直到大约一半的时候，我突然得到了split undefined error，我的代码首先输出所有1260索引，这样我就可以检查所有的值都是好的，看起来都是好的，但我真的被难倒了

JS代码如下

// THIS 2D ARRAY IS A REPRESENTATION OF THE POSSIBLE VALUES A USER CAN CHOOSE PER HTML PANEL, AS A USER MAKES A CHOICE THE CURRENT PANEL HIDES AND REVEALS THE NEXT
var allArrays = [['0','1','2','3','4','5','6'], ['1','2'], ['0','1','2','3','4','5'], ['1','2','3','4','5'], ['1','2','3']];

// THIS FUNCTION BELOW USES RECURSION TO RUN THROUGH THE ABOVE ARRAY AND FIND ALL POSSIBLE UNIQUE COMBINATIONS A USER COULD SELECT OF WHICH THERE ARE 1260
function allPossibleCases(arr) {
    if (arr.length == 1) {
        return arr[0];
    } else {
        var result = [];
        var allCasesOfRest = allPossibleCases(arr.slice(1));
        for (var i = 0; i < allCasesOfRest.length; i++) {
            for (var j = 0; j < arr[0].length; j++) {
                result.push(arr[0][j] + " " + allCasesOfRest[i]);
            }
        }
        return result;
    }
}

// BEGIN THE RECURSION AND RETURN 2D ARRAY OF THE RESULTS
var uniqueIds = allPossibleCases(allArrays);

// THE BELOW FLATTENS THE RESULTING 2D ARRAY OUTPUT FROM THE 'allPossibleCases' FUNCTION TO A SINGLE ARRAY WITH ALL 1260
// EACH 1260 INDICES CONTAINS A UNIQUE COMBINATION OF THE NUMBERS BUT AS A STRING WITH SPACES e.g. "0 1 0 1 1", "1 1 0 1 1", "2 1 0 1 1"
var merged = [];
merged     = merged.concat.apply(merged, uniqueIds);

// OUTPUT THE FLATTEND ARRAY WITH ALL 1260 VALUES
console.log(merged);

var id1 = 0;
var id2 = 0;
var id3 = 0;
var id4 = 0;
var id5 = 0;

// INCREMENTATION VALUE FOR myTimer FUNCTION
var i   = 0;

// THE FUNCTION BELOW STEPS THROUGH EACH OF THE ARRAY ITEMS IN THE 'merged' ARRAY ALL 1260 USING i AS THE INCREMENTOR
function myTimer() {

    // FOR EACH INDEX IN THE ARRAY I NEED TO TAKE THE FIVE INDIVIDUAL STRING INTEGERS AND PUSH THEM INTO INDIVIDUAL 
    // TEXT INPUTS ON MY WEBSITES FRONTEND TO PROGRAMMATICALLY SIMULATE A USER HAVING GONE THROUGH AND MANUALLY MADE THESE CHOICES
    // I NEED TO USE JAVASCRIPT SPLIT TO PULL OUT EACH STRING INTEGER SO THAT I CAN USE IT ON MY FRONTEND AND ACHIEVE THIS USER FAKING
    var str = merged[i];
    console.log('Current render increment = '+i);
    console.log('The arrays current increment = '+str);
    var res = str.split(" ");

    // I CAST THE SPLIT STRING INTEGERS TO PROPER INTEGERS
    id1 = parseInt(res[0]);
    id2 = parseInt(res[1]);
    id3 = parseInt(res[2]);
    id4 = parseInt(res[3]);
    id5 = parseInt(res[4]);

    // NOW I PUSH EACH OF THESE VALUES INTO MY FORM TO FAKE A USER HAVING MADE ONE OF A POTENTIAL 1260 SET OF CHOICES
    $('.manualImageGen .hair').val(id1);
    $('.manualImageGen .eyes').val(id2);
    $('.manualImageGen .outfit').val(id3);
    $('.manualImageGen .scenario').val(id4);
    $('.manualImageGen .resolution').val(id5);

    // THIS LINE FORCES ANGULAR TO UPDATE ITS UI
    $('.manualImageGen input').trigger('input');

    // THIS IS USED TO TAG THE IMAGE GENERATED BY HTML2CANVAS WITH A UNIQUE ID RELATING TO ONE OF THE 1260
    var fileid = res[0]+res[1]+res[2]+res[3]+res[4];

    // HTML2CANVAS TAKES A SCREEN SHOT OF THE FINAL IMAGE GENERATED AS A RESULT OF FAKING THE CHOICES THAT WERE GENERATED
    html2canvas($('.finalImages'), {
        onrendered: function(canvas) {

            var data = canvas.toDataURL();

            $.ajax({
                type: "POST",
                url: ajaxurl,
                data: { 
                    'action':'nopriv_ra_addrelationstick',
                    'relStick' : data,
                    'fileid' : fileid
                }
            })
            .done(function( msg ) {
                if( msg == "false" )
                {
                    alert('Sorry but you need to log in to save your R Stick');
                }
            });

        }
    });

    if(i <= merged.length-1){
        i++;
        console.log("Items left to render = "+merged.length--);
    }else{
        clearInterval(myVar);
    }

}

// TRIGGER THE SETTIMEOUT LOOP ONCE PER SECOND TO STOP BROWSER FREEZING AND GIVE HTML2CANVAS TIME TO DO ITS THING
var myVar = setInterval(function () {myTimer()}, 1000);

//此2D数组表示用户可以在每个HTML面板上选择的可能值，当用户做出选择时，当前面板将隐藏并显示下一个面板
变量allarray=['0'、'1'、'2'、'3'、'4'、'5'、'6']、['1'、'2'、['0'、'1'、'2'、'3'、'4'、'5']、['1'、'2'、'3'、'4'、'5']、['1'、'2'、'3']；
//下面的函数使用递归遍历上述数组，并找到用户可以选择的所有可能的唯一组合，其中有1260个
功能所有可能情况（arr）{
如果（arr.length==1）{
返回arr[0]；
}否则{
var结果=[]；
var allCasesOfRest=所有可能的情况（arr.slice（1））；
对于（var i=0；i如果（i以防万一，您的域中确实有这些图像，下面是我的解决方案：

var layer0 = document.getElementById('input_layer0').value;
var layer1 = document.getElementById('input_layer1').value;
var layer2 = document.getElementById('input_layer2').value;
...
var panel = [layers[0][layer0],layers[1][layer1],layers[2][layer2]...];
var c = document.createElement('canvas').getContext('2d');
c.canvas.width = 200;
c.canvas.height = 200;
c.clearRect(0,0,200,200);
for(var i=0;i<panel.length;i++)
 c.drawImage(panel[i],0,0);
document.getElementById('result_image').src = c.canvas.toDataURL();

等等。
问题-所有这些PNG都在同一个域上吗？你能使用Canvas.toDataURL（）吗？还是会有跨域源问题？因为我真的认为这可以用一个小脚本而不是这个健壮的解决方案来完成。你真的想尝试减少数组的长度：
merged.length--
i = new Image();
i.src = 'bg1.jpg';
layers[0].push(i);
i = new Image();
i.src = 'bg2.jpg';
layers[0].push(i);
i = new Image();
i.src = 'body_sitting.png';
layers[1].push(i);
i = new Image();
i.src = 'body_standing.png';
layers[1].push(i);