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

Question

这是一个简单的计数代码，使用 . 从 14 计数到 0 setInterval。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;函数的外部（为什么？）代码工作，但创建全局变量是一种不好的做法，我想在这里提示......

标签： javascript

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 次调用，但它们没有使用相同的变量。您在内部定义的每个变量都是不同的。

您可以查看这篇文章JavaScript 中变量的范围是什么？这将帮助您了解您的问题。