使用 Onclick 调用嵌套函数答案

【问题标题】：Using Onclick to call a nested function使用 Onclick 调用嵌套函数
【发布时间】：2021-04-27 07:36:51
【问题描述】：

我想实现一个基本的计时器程序，在开始按钮上启动一个 15 秒的计时器并在停止按钮上停止

这是我到目前为止所做的事情

 var timeleft = 15;
 function timer(){
 var downloadTimer = setInterval(function(){
    if(timeleft <= 0){
    clearInterval(downloadTimer);
document.getElementById("countdown").innerHTML = "Finished";
 } else {
   document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
 }
 timeleft -= 1;
  }, 1000);
  function timerstop(){
 clearInterval(downloadTimer);
  }
 }

HTML

<div id="countdown"></div>
<button onclick="timer();">start</button>
<button onclick="timerstop();">stop</button>

我不得不使用嵌套函数方法的原因是访问变量下载定时器，开始按钮按预期工作，但单击停止按钮时出现以下错误

 Uncaught ReferenceError: timerstop is not defined

我想知道这是否是一个编程错误或者我应该改变我的方法

提前致谢

【问题讨论】：

在timer 函数之外声明downloadTimer 和timerstop。内联侦听器引用的所有内容都必须是全局可访问的。
离题 - setInterval(..., 1000) 不会在 1000 毫秒后准确触发。为了获得准确的计时，您应该考虑减去两个Date.now() 结果（一个在单击开始按钮时存储，第二个在间隔回调时执行）。
当您调用timerstop() 时，变量downloadTimer 脱离了上下文。您必须全局声明它或将其传递给第二个函数

标签： javascript function nested-function

【解决方案1】：

将 downloadTimer 移到外面。

var timeleft = 15;
var downloadTimer;

function timer() {
    downloadTimer = setInterval(function () {
        if (timeleft <= 0) {
            clearInterval(downloadTimer);
            document.getElementById("countdown").innerHTML = "Finished";
        } else {
            document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
        }
        timeleft -= 1;
    }, 1000);

}

function timerstop() {
    clearInterval(downloadTimer);
}

【讨论】：

这应该是评论而不是答案