如何为titleMarquee标题滚动效果添加文本后置空格？

要实现标题滚动完一轮后在末尾添加空格，核心是要保存原始标题文本，以此判断滚动是否完成一轮，再触发添加空格的逻辑。原代码的问题在于没有保留原始标题，无法识别滚动完成的节点，因此无法添加空格。

以下是修改后的代码：

// 保存原始标题，先去除首尾空格避免重复添加
const originalTitle = document.title.trim();
let titleText = originalTitle;
// 标记是否已添加过空格，防止重复添加
let hasAddedSpace = false;

function titleMarquee() {
    // 执行滚动逻辑：将第一个字符移到末尾
    titleText = titleText.substring(1) + titleText.substring(0, 1);
    
    // 判断是否完成一轮原始标题滚动，且未添加过空格
    if (!hasAddedSpace && titleText === originalTitle) {
        // 在末尾添加空格
        titleText += ' ';
        hasAddedSpace = true;
    }
    
    document.title = titleText;
    // 用函数引用代替字符串，避免作用域问题
    setTimeout(titleMarquee, 400);
}

// 启动滚动效果
titleMarquee();

代码说明： #

• originalTitle 保存原始标题的纯净版本，避免后续修改后无法比对；
• hasAddedSpace 标记是否已添加过空格，防止每次滚动回原始标题时重复添加，导致空格无限增多；
• 当titleText回到原始标题时，说明完成了一轮滚动，此时添加空格并标记状态；
• 将setTimeout的字符串参数改为函数引用，避免潜在的作用域解析问题。

如果需要每完成一轮就多添加一个空格（比如一轮后1个空格，两轮后2个空格），可以去掉hasAddedSpace标记，修改判断逻辑：

const originalTitle = document.title.trim();
let titleText = originalTitle;

function titleMarquee() {
    titleText = titleText.substring(1) + titleText.substring(0, 1);
    
    // 当滚动回原始标题开头时，添加一个空格
    if (titleText === originalTitle) {
        titleText += ' ';
    }
    
    document.title = titleText;
    setTimeout(titleMarquee, 400);
}

titleMarquee();

内容的提问来源于stack exchange，提问作者suzuya.