How does JavaScript implement a timed execution of a delay method?

there is such a requirement:
< div id= "demo" > < / div >

This element appears when the

page enters, then disappears after 5 seconds, appears after an interval of 8 seconds, and disappears again after 5 seconds, repeating this process.
my idea is this:

setInterval(function(){
    $("-sharpdemo").css("display","block")
    setTimeout(function(){
        $("-sharpdemo").css("display","none");
    },5000);
}, 8000);

but there seems to be a problem with time. What caused it?

Html5 node.js es5 es6 javascript

Mar.17,2021

8s |-| setInterval
5s |-| setTimeout
the effect you write should be that the 5s element disappears and the element appears after 3s. In fact, you only need to change the interval between setInterval to 13000.

function delay() {
    setTimeout(function () {
        $('-sharpdemo').css('display','none');
        setTimeout(function () {
            $('-sharpdemo').css('display','block');
            delay();
        }, 8000);
    }, 5000)
}
delay();

change 8000 to 13000

isn't it better to implement

const a = function (){
    setTimeout(function(){
        console.log('a');
        b()
    },1000);
}
const b = function (){
    setTimeout(function(){
        console.log('b');
        a()
    },2000);
}

a()

take a look.

Previous: How to make the child elements in div highly adaptive?

Next: Js implements the progress bar and controls the pause and continuation of the progress bar in real time. The animation needs to be smooth.