如何通过点击结束按钮终止setInterval定时器？

当然有完美的实现方法！核心逻辑就是利用setInterval返回的定时器ID，搭配clearInterval来精准控制任务的启停。我结合你给出的现有代码，帮你补全完整的实现逻辑：

完整代码示例 #

HTML部分（完善按钮结构） #

<button class="input-btn start-button">
  <i class="fa fa-play" aria-hidden="true"></i> Start
</button>
<button class="input-btn end-button">
  <i class="fa fa-stop" aria-hidden="true"></i> Stop
</button>
<button class="input-btn scrap-button">
  <i class="fa fa-share-square" aria-hidden="true"></i> Export to...
</button>

JavaScript部分 #

// 声明变量存储定时器ID，可根据项目需求调整作用域
let scrollInterval;

// 获取页面中的按钮元素
const startBtn = document.querySelector('.start-button');
const endBtn = document.querySelector('.end-button');

// 定义无限滚动的核心逻辑
function autoScroll() {
  // 这里替换成你实际的滚动逻辑，示例为平滑向下滚动200px
  window.scrollBy({
    top: 200,
    behavior: 'smooth'
  });
}

// 绑定开始按钮的点击事件
startBtn.addEventListener('click', () => {
  // 先清除已有定时器，避免重复点击创建多个并行任务
  if (scrollInterval) clearInterval(scrollInterval);
  
  // 启动定时任务，每2秒执行一次滚动（时间间隔可自行调整，单位为毫秒）
  scrollInterval = setInterval(autoScroll, 2000);
  
  // 可选优化：添加状态反馈，防止误操作
  startBtn.disabled = true;
  endBtn.disabled = false;
});

// 绑定结束按钮的点击事件
endBtn.addEventListener('click', () => {
  // 清除定时任务
  clearInterval(scrollInterval);
  // 重置定时器变量，避免残留状态影响下一次启动
  scrollInterval = null;
  
  // 可选优化：恢复按钮可用状态
  startBtn.disabled = false;
  endBtn.disabled = true;
});

关键细节说明 #

• 保存定时器ID：setInterval执行后会返回一个唯一数字ID，只有通过这个ID才能用clearInterval停止对应的任务，所以必须将其存储在变量中。
• 防止重复启动：点击开始按钮时先检查并清除已有定时器，避免多次点击导致多个滚动任务同时运行，造成滚动混乱。
• 用户体验优化：添加按钮禁用状态可以直观反馈任务的启停状态，减少用户误操作。

你可以根据自己的需求调整autoScroll里的滚动逻辑，以及setInterval的时间间隔。

内容的提问来源于stack exchange，提问作者Rahul shukla