JS线性切换页面标题函数异常：仅显示数组首个元素求助

问题排查 #

你的linear功能失效主要有以下几个问题：

1. 变量名拼写错误：linear函数里用了titleArray，但实际定义的标题数组是titles，导致无法正确获取标题内容。
2. 不存在的函数调用：main函数中定时器里调用了changeTitle('linear')，但代码里根本没定义这个函数，应该直接调用linear()。
3. 硬编码数组长度：原判断i == 4固定了数组长度，后续修改数组元素数量时需要手动调整，不够灵活。

修复后的完整代码 #

var titles = ["MyTitle","AlsoMyTitle","MyThirdTitle","TheFourth"];
var timeLaps = 1000; // 毫秒单位，你需求里的30秒可以改成30000
var i = 0;
var ogTitle = document.title;

function mainTitle() {
    document.title = ogTitle;
}
 
function newTitle() {
    document.title = 'Come Back!';
}

function leaving() {
    window.onblur = newTitle;
    window.onfocus = mainTitle;
}

function linear(){
    // 用取余操作自动循环索引，适配数组长度变化
    document.title = titles[i % titles.length];
    i++;
}

function main(animType) {
    if(animType === "leaving") {
        leaving();
    } else if (animType === "linear") {
        setInterval(() => {
            linear()
        }, timeLaps);
    }
} 

main('linear');

关键修复说明 #

• 把titleArray改成titles，匹配实际数组名；
• 定时器内替换changeTitle('linear')为linear()，直接调用目标函数；
• 用i % titles.length代替i == 4的判断，不管数组有多少个元素，都能自动循环切换，不用修改判断条件。

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