javascript - 计算带有广告的图库的图片 ID

Question

我有一个图片库，每三张图片后就会显示一个广告(必须支付这些账单😀)。

所以在示例场景中，我的画廊将有 11 张幻灯片，其中有 9 张图片和 2 个广告，如下所示:

这张图的第一行是幻灯片的从零开始的索引，我在一个数组中。

我现在需要想出一个公式来计算给定幻灯片 ID(底行中的数字)对应的图片的索引。

所以对于slideIndex === 2，我需要picIndex === 2，对于slideIndex === 5，我需要picIndex === 4 和 slideIndex === 8，结果将是 picIndex === 6。

对于包含广告的幻灯片，我想要最后一张图片的索引，因此 slideIndex === 3 → picIndex === 2 .

我确实已经有了一个可行的解决方案，我只使用了一个 for 循环，但这看起来真的很蹩脚和麻烦:

const adInterval = 3; // show an ad every 3 pics

function calculatePicIndex(slideIndex) {
    let picCount = 0;
    let picIndex = -1;
    for (let i = 0; i <= slideIndex; i++) {
        if (++picCount > adInterval) {
            picCount = 0;
        } else {
            picIndex++;
        }
    }
    return picIndex;
}

for (let i = 0; i < 11; i++) {
    console.log(`slide index: ${i} – pic index: ${calculatePicIndex(i)}`);
}

我敢肯定有一个更优雅的解决方案，使用简单的数学公式，所以基本上，它更像是一个数学问题而不是 JavaScript 问题:

如何重构上述代码以避免循环并通过数学公式计算数字？

我试过这样的:

const picIndex = slideIndex - Math.floor(slideIndex / adInterval);

但这给了我不正确的值，随着幻灯片索引的增加，这些值越来越不正确。

参见 JSFiddle:https://jsfiddle.net/pahund/1bobtkyp/3/

Answer 1

你的公式几乎是正确的，你只需要在幻灯片索引和广告间隔上加1就可以修正它:

const adInterval = 3;

for (let slideIndex = 0; slideIndex < 12; slideIndex++){
    let picIndex = slideIndex - Math.floor((slideIndex + 1) / (adInterval + 1)); 
    console.log(`slide index: ${slideIndex} – pic index: ${picIndex}`);
}