SetInterval 함수에서 임의 번호가 업데이트되지 않음

Question

나는 이렇게 발견 된 몇 가지 다른 접근 방법을 시도했지만 그럴 수는 없습니다.

배열에서 임의로 선택한 항목을 setInterval 함수에서 업데이트하려고하지만 임의의 숫자가 변경되지 않습니다.

처음로드시 임의로 선택되지만 함수가 다시 실행될 때마다 사실 이후에 업데이트되지 않습니다. 이 jsFiddle -----

다시 실행 반복해서 바이올린 무작위로 선택된 다른 경로를 볼 수에 (이후 여기 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); 

:

이

는 모두 lazylinepainter 플러그인을 사용하고 있습니다 그렇지 않으면 업데이트되지 않습니다).

스 니펫이 분명하고 거기에 몇 가지 다른 것들을 시도하고 있었으면 좋겠다.

궁극적 인 목표는 각 구간마다 pathArray (pathOne, pathTwo, pathThree 등)에서 무작위로 선택한 항목을 그 선에 그려야한다는 것입니다.

Answer 1

실제 함수를 한 번만 호출 한 다음 계속해서 사용되는 randomColor에 할당하는 것처럼 보입니다.

은 당신이 대신해야 할 것은이 필요한 곳을 호출 할 수 있습니다 :

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

당신은 새로운 하나를 모든 시간을 얻을 그런 식으로.