我在笔记本中有这支笔,而且我有一个名为' getRandomPos '的递归函数,该函数填充了一个名为' randomPos <的数组/ em> '通过另一个数组中随机选择的值作为参数传递,称为“ dimensionArray ”
如果新数组的长度大于参数'金额',则应返回新数组。
单击画布时,该功能会运行。
如果你打开了devtools,因为第17行有一个调试器,你可以通过chrome中的devtools中的'跳过下一个函数调用'按钮完成该功能的步骤,你会看到在“ randomPos ”数组的长度大于“ 金额 ”参数之后,它应该返回 randomPos 。
但它没有。
它从第30行到第31行循环三次。
我不明白这一点,不应该只返回停止功能并返回 randomPos ?
这是代码,这是代码笔上的笔:pen
let getRandomFromArray = (items) => {
let item = items[Math.floor(Math.random()*items.length)]
return item
}
let rows = 20,
cols = 50,
randomXUnits = [],
randomYUnits = [],
canvasWidth = 500,
canvasHeight = 200,
gridXDiv = (canvasWidth/cols),
gridYDiv = (canvasHeight/rows),
randomPos = []
let getRandomPos = (amount, dimensionArray) => {
debugger;
let randomUnit = getRandomFromArray(dimensionArray)
if(randomPos.length < amount){
if(randomPos.includes(randomUnit)){
getRandomPos(amount, dimensionArray)
}else{
randomPos.push(randomUnit)
getRandomPos(amount, dimensionArray)
}
}
return randomPos
}
let drawDivisions = (randomPosArray, dimension) => {
randomPosArray.forEach( p => {
fill(255)
noStroke()
if(dimension === canvasWidth){
rect(p,0,gridXDiv, canvasHeight)
}else{
rect(0,p,canvasWidth, gridXDiv)
}
})
}
function setup(){
createCanvas(canvasWidth,canvasHeight)
background(0)
for (let i = gridXDiv; i < width-(gridXDiv-1); i+= gridXDiv) {
randomXUnits.push(i)
for (let j = gridYDiv; j < height-(gridYDiv-1); j+= gridYDiv) {
if (randomYUnits.length < 20) {
randomYUnits.push(j)
}
stroke(255)
point(i,j)
}
}
}
function draw(){
}
function mouseClicked() {
background(0)
randomPos = []
let usedPositionsInX = getRandomPos(3, randomXUnits)
drawDivisions(usedPositionsInX,canvasHeight)
let usedPositionsInY = getRandomPos(3, randomYUnits)
drawDivisions(usedPositionsInY,canvasWidth)
}
答案 0 :(得分:0)
这是因为你正在使用递归而getRandomPos
没有完成递归调用,调用堆栈是这样的:
getRandomPos
getRandomPos
测试randomPos是否小于金额, false 然后
getRandomPos
测试randomPos是否小于金额, false 然后
getRandomPos
测试randomPos是否小于金额, false 然后
getRandomPos
测试randomPos是否小于金额, true 然后