当setInterval（）运行其他函数时，起作用的函数突然变为“非函数”

Question

tl;dr: my function doesn't run while I've got setInterval() running another function every 3 seconds.

I'm making a text-based gardening game that runs "plant()" when I type plant. I've also got a setInterval(updatePlots, 3000) going.

both of these functions work fine on their own, but when I try to run plant() while setInterval() is going, it brings up the error Uncaught TypeError: plant is not a function

(I know it's the setInterval() because I tested planting without it running, and it worked fine.)

what I tried (didn't work):

if (command == "plant") {
  clearInterval(timer);
  plant(a, b);
  var timer = setInterval(updatePlots, 3000);
}

---

I'm not really sure what code I've got to show, since it seems more of a fundamental problem than single-line error... but here it is.

function updatePlots() {
  fullplots = [];
  for (i = 0; i < plots.length; i++) {
    if (plots[i].length) {
      fullplots.push(i);
    }
  }

  for (i = 0; i < fullplots.length; i++) {
    plant = plots[fullplots[i]][0];
    status = plots[fullplots[i]][1];
    growth = plots[fullplots[i]][2];

    if (growth < 100) {
        plots[fullplots[i]][2]++;
    }
  }

  if (document.getElementById('plots').style.display == 'block') {
    getPlots();
  }
}

...

function processTwo(command, a) {
  if (command == 'plant') {
    clearInterval(timer);
    console.log('about to plant 1'+a);
    plant(1, a);
    var timer = setInterval(updatePlots, 3000);
  }
  else { createError() }
}

update: solved!

Answer 1

function updatePlots() {
  // this way, the global plant function is not overwritten
  // @see JavaScript variable scope
  var plant;
  // You might want to 'var' your other local (?) variables, too
  // var fullplots, i, status, growth;
  fullplots = [];
  for (i = 0; i < plots.length; i++) { //get fullplots
    if (plots[i].length) {
      fullplots.push(i);
    }
  }

  for (i = 0; i < fullplots.length; i++) {
    // at this line of code you overwrite the global plant, which is not a function anymore then
    plant = plots[fullplots[i]][0];
    status = plots[fullplots[i]][1];
    growth = plots[fullplots[i]][2];

    if (growth < 100) { //increment
        plots[fullplots[i]][2]++;
    }
  }

  if (document.getElementById('plots').style.display == 'block') {
    getPlots();
  }
}

Answer 2

The problem arises in the updatePlots method called by setInterval. What you're doing in there is assigning a new value to "plant"

plant = plots[fullplots[i]][0];

Then, when plant is called, it points to the new value you assigned to it in updatePlots instead of the function you originally had. You have to declare a new variable in updatePlots to avoid changing the plant method. I'd use a different name to avoid confusion.