javascript中的作用域、词汇环境和执行上下文

在使用脚本自动添加事件监听器时，出现了一种情况：varaible

let-activeModal保持“活动”，但在另一个函数内创建的变量
let currentPlayTime在函数执行后不存在。制作<代码>让当前播放时间变量全局显然是有效的

我的主要问题是为什么变量
让activeModal“生存”在函数完成后

第二个问题，我将如何避免使用
let currentPlayTime全局

我怀疑这与范围、词汇环境或执行上下文有关，但到目前为止，我读到的关于这些主题的内容让我有点困惑。
问候

//不起作用
函数toggleAnimation（）
{
执行此操作时，请使用currentPlayTime；//

for (let i=0;i<btn.length;i++) {

  btn[i].onclick = function() {  
    setTimeout(function (){
      modals[i].style.display = "block";
      console.log("TIMEOUT");
     },1200
   );

   activeModal = modals[i];

  }

现在，你需要做些什么

const variableName = toggleAnimation();

variableName();

所以这里发生的是，
toggleAnimation
返回执行时需要
currentPlayTime
的函数

这意味着包含返回函数的块将是其执行所必需的。因此，编译器将保留此闭包，以便无论何时调用它都可以执行。
非常感谢您的回答！起初，当您说“您造成了一个两难境地…”时，让我想到“好吧，我所做的不是最佳实践：（），但如果我正确理解您提出的避免全局变量的解决方案基本上利用了这种“两难创造”，因此我认为这不是真正的“坏做法”，还是我错了？是的，我们需要这个来停止垃圾收集。这个概念就是闭包，它是JS的基本原理之一。有各种编程实践都在显式和隐式地使用闭包。最终，您使用什么更多地取决于您的体系结构。对于r.g，如果您想将
的功能推广到gLeanImation
并在应用程序中使用它，您可以轻松地使用闭包。但是，如果您的用例没有那么广泛，您可以轻松管理全局变量。最佳实践应该始终是最适合您的体系结构而不会造成混乱的做法。太棒了！再次感谢！
//DOES NOT WORK
function toggleAnimation()
  {
  let currentPlayTime; //<---- SAME RATIONALE AS addModalHandlers() ABOVE BUT WORKS NOT

    console.log(path.style.transition);
    if (path.style.transition == 'none 0s ease 0s')
    {
      toggleIcon()
      console.log("currentPlayTime on play: "+currentPlayTime);
      wavesurfer.play(currentPlayTime);
      compatibleTransition(wavesurfer.getDuration() - currentPlayTime );
      path.style.strokeDashoffset = 0;
    }
    else
    {
    toggleIcon()
    path.style.strokeDashoffset = window.getComputedStyle(path).strokeDashoffset;
    path.style.transition = 'none';
    currentPlayTime = wavesurfer.getCurrentTime();
    console.log("currentPlayTime on pause: "+currentPlayTime);
    wavesurfer.pause();
    }
  }

for (let i=0;i<btn.length;i++) {

  btn[i].onclick = function() {  
    setTimeout(function (){
      modals[i].style.display = "block";
      console.log("TIMEOUT");
     },1200
   );

   activeModal = modals[i];

  }

function toggleAnimation() {
  let currentPlayTime;

  return function doDomething() {
    if (path.style.transition == 'none 0s ease 0s') {
      toggleIcon()
      console.log("currentPlayTime on play: "+currentPlayTime);
      wavesurfer.play(currentPlayTime);
      compatibleTransition(wavesurfer.getDuration() - currentPlayTime );
      path.style.strokeDashoffset = 0;
    }
    else {
      toggleIcon()
      path.style.strokeDashoffset = window.getComputedStyle(path).strokeDashoffset;
      path.style.transition = 'none';
      currentPlayTime = wavesurfer.getCurrentTime();
      console.log("currentPlayTime on pause: "+currentPlayTime);
      wavesurfer.pause();
    }
  }
}

const variableName = toggleAnimation();

variableName();