jQuery使用setInterval定时修改元素id的代码问题排查

你的代码核心bug是ID选择器失效，具体逻辑问题如下：

• 页面初始加载时，目标元素的ID为cs-banner-background，DOM就绪后你第一行代码就把该元素的ID修改为数组第一个值cs-bg-img，此时页面中已经不存在ID为cs-banner-background的元素。
• 后续定时器每次触发时，你仍然使用$("#cs-banner-background")作为选择器查找元素，自然匹配不到任何DOM节点，后续的ID切换逻辑完全无法执行。
• 额外隐患：你没有保存定时器返回值，后续不需要轮询时无法清除定时器，容易引发内存泄漏。

修复思路很简单：第一次查找到目标元素后，把它存为jQuery对象变量，后续直接操作这个变量即可，不需要每次都通过ID选择器查找元素，从根源上避免ID变动导致的选择器失效问题。

var ids = [
    "cs-bg-img",
    "cs-bg-img1"
]

$(function () {
    var i = 0;
    // 初始化时就缓存目标元素
    const $bannerBackground = $("#cs-banner-background");
    $bannerBackground.attr('id', ids[i]);
    
    const switchTimer = setInterval(function () {
        i = i >= ids.length - 1 ? 0 : i + 1;
        $bannerBackground.attr('id', ids[i]);
    }, 2300);

    // 页面卸载/不需要轮播效果时，调用 clearInterval(switchTimer) 即可清除定时器
});

内容的提问来源于stack exchange，提问作者Abu Yousuf