Question

这是一个简单的计数代码，可使用setInterval从14计数到0。 3秒后，我想清除间隔并停止使用savedTimerCounter('stop');进行计数。问题是我无法访问间隔来清除savedTimerCounter('stop');

为什么以及如何解决此问题？我想念的是什么？

let savedTimer;

function savedTimerCounter(el) {
  //function scope variable 
  switch (el) {
    case 'start':
      timeleft = 14;
      console.log(timeleft);
      savedTimer = setInterval(function() {
        timeleft--;
        console.log(timeleft);
        if (timeleft <= 0) {
          clearInterval(savedTimer);
          console.log("done");
          return;
        }
      }, 1000);
      break;
    case 'stop':
      clearInterval(savedTimer);
      break;
  }
}

//Start counting 
savedTimerCounter('start');

//Stop counting that dosn't work!
setTimeout(function() {
  savedTimerCounter('stop');
}, 3000)

如果将let savedTimer;放在函数之外（为什么？），代码可以工作，但是由于创建全局变量是一种不好的做法，因此我想在此提示...

Answer 1

您的问题是变量的范围，让我们举个例子：

function doSomething(action) {
  let timer;
  console.log(timer) // will be always undefined;
  // now I do something
  switch (action) {
    case 'start':
      {
        timer = 'start';
        break;
      }
    case 'end':
      {
        timer = 'end'
        break;
      }
  }

  console.log(timer) // will be always the case that enters.
}

doSomething('start'); // this is one function call
console.log('-----------');
doSomething('end'); // this is another function call

如您所见，

您正在对同一函数进行2次调用，但是它们没有使用相同的变量。您在其中定义的每个变量都是不同的。

您可以查看这篇帖子What is the scope of variables in JavaScript?，这将有助于您理解问题。

除非清除间隔在间隔函数内部，否则清除间隔不起作用

1 个答案: