JS使用setTimeout实现自定义倒计时报函数未定义如何解决

问题原因 #

• 初始的idiot()未定义报错是函数拼写错误：你写的funtion为错误拼写，正确语法是function
• setTimeout仅会延迟执行1次，要实现每隔1秒重复执行需要用setInterval
• 原代码每次调用函数都会重新从输入框取初始值，相当于每次都在原始输入值基础上减1，无法实现连续递减
• 原代码的定时器是页面加载就自动触发，不是点击按钮后才启动，不符合需求
• 没有做停止逻辑，倒计时到0后会继续减到负数

修正后的完整代码 #

JS代码

// 存储定时器ID，用于后续停止倒计时
let timer = null;

function idiot() {
  // 点击按钮先清空已有定时器，避免重复启动多个倒计时
  if(timer) clearInterval(timer);
  // 仅取一次初始输入值，转为数字类型
  let time = Number(document.getElementById("time").value);
  const timeShow = document.getElementById("eblan");
  // 启动每秒执行的定时器
  timer = setInterval(() => {
    time--;
    timeShow.innerHTML = time;
    // 倒计时到0自动停止
    if(time <= 0) {
      clearInterval(timer);
      timer = null;
    }
  }, 1000)
}

HTML代码（无需修改，和原代码一致即可）

<input type="number" id="time"></input>
<button onclick="idiot()">click</button>
<div id="eblan">time</div>

内容的提问来源于stack exchange，提问作者Mavlyanov Bayazat