javascript - SetInterval 函数中的随机数未更新

Question

我尝试了几种不同的方法来解决这个问题，但似乎无法让它发挥作用。

我正在尝试在 setInterval 函数中更新数组中随机选择的项目，但随机数没有改变。

它是在第一次加载时随机选择的，但之后每次函数再次运行时它都不会更新。

这都是使用lazylinepainter插件:https://github.com/camoconnell/lazy-line-painter

var pathArray = [pathOne,pathTwo,pathThree,pathFour,pathFive,pathSix],
colors = ['#e51616','#0000FF','#FFFF00','#00FF00'],
drawBox = $('#drawing-box'),
svg = $('#drawing-box svg'),
svgPath = document.createElementNS("http://www.w3.org/2000/svg", "path");

function randomFrom(array) {
   return array[Math.floor(Math.random() * array.length)];
}

randomColor = randomFrom(colors);

var i = Math.floor(Math.random() * (5 - 0 + 1));
console.log(i);

function Draw(){

   var drawLoop = setTimeout(function (){
                    $('#drawing-box svg path').animate({'opacity':0},300);
                    setTimeout(function(){
                        $('#drawing-box svg path').remove();
                        drawBox.lazylinepainter('paint');
                        console.log(pathArray[i]);
                    },350);
                },5500);

   var drawFunc = drawBox.lazylinepainter({
                "svgData": pathArray[i],
                "strokeColor": randomColor,
                "strokeWidth": 5,
                "responsive": true,
                "onComplete": drawLoop
            });

   drawFunc.lazylinepainter('paint')
};

setInterval(function(){
   Draw();
},6000);

这里是jsFiddle —————

一遍又一遍地重新运行 fiddle 以查看随机选择的不同路径(因为否则它不会更新)。

希望该片段很清楚，仍在尝试一些不同的东西。

最终目标是让该线在每个间隔内从 pathArray(pathOne、pathTwo、pathThree 等)中随机选择一个项目。

Answer 1

在我看来，您只调用实际函数一次，然后将其分配给 randomColor ，它会反复使用。

您应该做的是在需要的地方调用它:

var drawFunc = drawBox.lazylinepainter({
            "svgData": pathArray[i],
            "strokeColor": randomFrom(colors),
            "strokeWidth": 5,
            "responsive": true,
            "onComplete": drawLoop
        });

这样您每次都会得到一个新的。