SOURCE

var index = 0;
var timer = null;
var INTERVAL_TIME = 3000;//2000ms=2s
let count = 0;
let startTime = 0;

/**重新开始**/
function reset() {
    clearTimeout(timer)
    timer = null;
    index = 0;
    const eleList = document.querySelectorAll('.block');
    eleList[index].style.display = 'flex';
    eleList[eleList.length - 1].style.display = 'none';
    fn()
}

function test(func) {
    const fn = function () {
        func.call(null) // do func
        timer = setTimeout(fn, INTERVAL_TIME)
    }
    timer = setTimeout(fn, INTERVAL_TIME)
}

function handler() {
    const eleList = document.querySelectorAll('.block');
    count += (INTERVAL_TIME / 1000)
    console.log('两次间隔的时间(ms)是--- ' + `${new Date().getTime() - (startTime + count * 1000)}` + ' ms')
    if (index === 0) {
        eleList[index].style.display = 'none';
        index += 1;
        eleList[index].style.display = 'flex';
    } else if (index === 1) {
        eleList[index].style.display = 'none';
        index = 0;
        eleList[index].style.display = 'flex';
    }
}

function fn() {
    test(handler)
}

startTime = new Date().getTime()
console.log('开始时间戳是--->' + startTime + ' ms')

fn()

<p>setTimeout</p>
<div class="container">
   <div class="block block1">
     我是第1块看板
   </div>
   <div class="block block2">
     我是第2块看板
   </div>
</div>

<button style="margin: 10px" onclick="reset()">重置</button>

.container {
    width: 600px;
    height: 200px;
    overflow: hidden;
}
.block {
    width: 600px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    margin: 10px;
}

.block1 {
    background: lightblue;
}

.block2 {
    background: lightpink;
}