如何在JS函数中持续调用Generator的next()实现图片轮播？

你的核心问题是每次setInterval执行时都会新建一个生成器实例，导致每次调用next()都从1开始，无法持续获取下一个索引值。

第一步：复用同一个生成器实例 #

把生成器实例的创建移到setInterval外部，确保整个轮播过程中只使用唯一的实例：

// 创建唯一的生成器实例，放在setInterval外面
const numberGenerator = indexGenerator();

setInterval(function animationslider() {
    // 复用同一个实例获取下一个索引
    const nextIndex = numberGenerator.next().value;
    // 用模板字符串简化路径拼接（比字符串拼接更清晰）
    const file = `<img src="slides/light_${nextIndex}.jpg" />`;
    document.getElementById("animation-slider").innerHTML = file;
}, 5000);

第二步：修正生成器的逻辑错误 #

原生成器里的if (index = 78)是赋值操作（不是判断相等），会导致逻辑异常，同时可以优化生成器避免递归（递归大量循环后可能有栈溢出风险）：

优化版生成器（推荐）

function* indexGenerator() {
    let index = 1;
    while (true) {
        yield index;
        // 当索引到77时重置为1，实现循环
        index = index === 77 ? 1 : index + 1;
    }
};

保留递归思路的修正版

如果你想保留原递归写法，只需修正判断条件：

function* indexGenerator() {
    let index = 1;
    while (index < 78) {
        yield index++;
    }
    // 把赋值操作改为严格相等判断
    if (index === 78) {
        yield* indexGenerator();
    }
};

为什么这样改有效 #

• 生成器实例仅创建一次，每次setInterval触发时调用同一个实例的next()，就能依次获取1、2、...、77，然后循环回到1。
• 优化后的生成器用无限循环+索引重置的方式，比递归更高效，也避免了递归调用可能带来的栈溢出问题。

内容的提问来源于stack exchange，提问作者Paweł Pedryc