JavaScript计时器textContent为0时执行操作，input事件无效求助

我实现了一个计时器功能，希望当显示时间的div元素的textContent变为0时，自动执行某些操作。

原JavaScript代码 #

function createTimer() {
    const display = document.createElement('div');
    display.classList.add('display');
    display.id = 'display';
    display.textContent = '5';

    return display;
};

let intervalID;

function startTimer() {
    resetTimer();
    intervalID = setInterval(() => {
        let displayTimer = document.getElementById('display');
        let displayNumber = parseInt(displayTimer.textContent);
        if (displayTimer.textContent !== '0') displayTimer.textContent = displayNumber - 1;
    }, 1000);
};

function resetTimer() {
    clearInterval(intervalID);
};

function someFunc() {
    // 这里还有其他代码，计时器本身能正常工作
    const timer = createTimer();
};

我尝试的方法 #

function someFunc() {
    const timer = createTimer();

    timer.addEventListener('input', () => {
        if (timer.textContent === '0') {
            console.log(true);
        };
    });
};

我原本以为给timer添加input事件就能追踪div的所有内容变化，在textContent变为0时触发逻辑，但实际没有任何效果。

解决方案 #

原因分析

input事件仅适用于表单交互元素（如<input>、<textarea>），普通<div>的textContent修改不会触发该事件，所以你的尝试无效。

方案1：在定时器逻辑中直接判断（最简单直接）

修改startTimer函数，每次更新时间时检查是否已到0，到达后执行操作并清除定时器（避免继续递减为负数）：

function startTimer() {
    resetTimer();
    intervalID = setInterval(() => {
        let displayTimer = document.getElementById('display');
        let displayNumber = parseInt(displayTimer.textContent);
        if (displayNumber <= 1) {
            displayTimer.textContent = '0';
            // 执行你需要的操作
            console.log(true);
            // 到达0后清除定时器
            clearInterval(intervalID);
        } else {
            displayTimer.textContent = displayNumber - 1;
        }
    }, 1000);
};

方案2：使用MutationObserver监听文本变化（通用型）

如果需要监听div文本的所有修改（不止定时器触发的），可以用MutationObserver来监听内容变化：

function someFunc() {
    const timer = createTimer();

    // 创建观察者实例
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.target.textContent === '0') {
                console.log(true);
                // 可选：如果只需要触发一次，监听后可以断开
                // observer.disconnect();
            }
        });
    });

    // 配置观察选项：监听文本内容变化
    const config = { childList: true, subtree: true };

    // 开始观察目标元素
    observer.observe(timer, config);
};

内容的提问来源于stack exchange，提问作者Glub-tubus Wepple