JavaScript实现定时追加文本与自动滚动功能的技术求助

一、修复你的计时器代码 #

现有代码存在语法错误、缺失延迟函数定义，且未在异步环境中使用await，修正后的可运行代码如下：

const timer = document.getElementById('timer');
let time = 1;

// 实现延迟函数
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// 启动异步计时器
async function startTimer() {
  while (true) {
    await delay(1000);
    // 用textContent替代innerHTML更安全高效
    timer.textContent += time;
    time++;
  }
}

// 初始化计时器
startTimer();

二、添加自动滚动功能 #

根据需求不同，提供两种常见自动滚动实现：

1. 自动滚动到页面底部 #

在计时器更新时触发页面滚动到底部，支持平滑滚动效果：

async function startTimer() {
  while (true) {
    await delay(1000);
    timer.textContent += time;
    time++;
    // 平滑滚动到页面底部
    window.scrollTo({
      top: document.body.scrollHeight,
      behavior: 'smooth'
    });
  }
}

2. 自动滚动到指定元素 #

如果需要滚动到某个特定DOM元素（示例中目标元素id为scroll-target）：

const targetEl = document.getElementById('scroll-target');

async function startTimer() {
  while (true) {
    await delay(1000);
    timer.textContent += time;
    time++;
    // 平滑滚动到目标元素顶部对齐视口
    targetEl.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    });
  }
}

内容的提问来源于stack exchange，提问作者Sofie tarste