JavaScript定时插入/销毁body图片元素的实现方案优化咨询

先说说你现有代码存在的几个核心问题：

• 全局变量冗余且不安全：定义了全局的Is（完全没用到）和t，容易和其他代码冲突，而且定时器的管理完全依赖这个全局变量，多次调用的话会直接覆盖。
• 重复加载图片浪费资源：定时器每秒调用一次FloatingRed，每次都会创建新的Image对象并重新加载图片，哪怕浏览器有缓存，也是没必要的重复操作。
• 日期判断逻辑异步错位：nowDate是函数刚执行时的时间，但图片onload是异步触发的，等图片加载完成时，实际时间可能已经过了起始/结束时间，判断结果会不准确。
• DOM操作逻辑不严谨：用$("#FloatRedImg").html()判断元素是否存在不靠谱，而且每次调用都尝试prepend，可能会出现重复插入的情况（现有判断逻辑存在漏洞）。
• 资源清理不彻底：结束时只清除了定时器，但没有处理图片对象的引用，可能存在内存泄漏风险。

优化方案 #

核心改进点 #

• 去掉全局变量，用闭包管理定时器和DOM元素状态，避免污染全局作用域。
• 只加载一次图片，避免重复请求。
• 用setTimeout代替setInterval，减少不必要的轮询，避免任务阻塞导致的定时器堆积。
• 统一管理DOM元素的创建、插入和销毁逻辑，避免重复操作。
• 增加日期格式合法性校验，避免无效日期导致的逻辑错误。

优化后的代码 #

function FloatRed(startDate, endDate, imgUrl) {
    // 日期合法性校验
    const startTimestamp = new Date(startDate).getTime();
    const endTimestamp = new Date(endDate).getTime();
    if (isNaN(startTimestamp) || isNaN(endTimestamp)) {
        console.error('日期格式不正确，请传入如"YYYY-MM-DD HH:MM"的格式');
        return;
    }
    if (startTimestamp >= endTimestamp) {
        console.error('起始日期不能晚于或等于结束日期');
        return;
    }

    let floatContainer = null;
    let timer = null;
    const now = Date.now();

    // 预加载图片
    const img = new Image();
    img.src = imgUrl;

    // 插入浮层的方法
    const insertFloatImg = () => {
        if (floatContainer) return;
        floatContainer = document.createElement('div');
        floatContainer.id = 'FloatRedImg';
        floatContainer.innerHTML = `<img src="${imgUrl}" width="${img.width}" height="${img.height}">`;
        document.body.prepend(floatContainer);
    };

    // 销毁浮层的方法
    const removeFloatImg = () => {
        if (floatContainer) {
            floatContainer.remove();
            floatContainer = null;
        }
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }
    };

    // 处理当前时间的逻辑
    const handleTimeCheck = () => {
        const currentTime = Date.now();
        if (currentTime >= endTimestamp) {
            removeFloatImg();
            return;
        }
        if (currentTime >= startTimestamp) {
            insertFloatImg();
        }
        // 继续定时检查，每秒一次
        timer = setTimeout(handleTimeCheck, 1000);
    };

    // 先判断当前状态
    if (now >= endTimestamp) {
        return;
    } else if (now >= startTimestamp) {
        insertFloatImg();
    }

    // 启动定时检查
    timer = setTimeout(handleTimeCheck, 1000);

    // 返回销毁方法，方便外部手动控制
    return {
        destroy: removeFloatImg
    };
}

// 示例调用
const floatInstance = FloatRed("2023-02-06 14:00", "2023-02-06 14:05", "xxx.com/xxx/xxx.jpg");

// 如需手动销毁，可调用：floatInstance.destroy();

额外说明 #

1. 闭包管理状态：所有的定时器、DOM元素都在函数内部管理，不会污染全局，多次调用会生成独立的实例，互不影响。
2. 预加载图片：只加载一次图片，避免重复请求，图片加载完成后再插入DOM，保证显示正常。
3. 定时器优化：用setTimeout代替setInterval，避免因任务阻塞导致的定时器堆积问题。
4. 错误处理：增加了日期格式和逻辑的校验，避免无效参数导致的异常。
5. 可手动控制：返回destroy方法，方便外部在需要的时候手动销毁浮层和定时器。

内容的提问来源于stack exchange，提问作者李大白白