如何向基于setInterval的精灵动画添加5秒的延迟？

Question

I have a sprite which runs using the setInterval method, It runs all the time and moves the css background position (x) by 100/(number of images -1) every interval of 60ms. When the position hits 96% i reset it to 0. Simple. This is the formula for animating a sprite with percentages.

Now I just want to add a 5 second delay between each time it runs (every time it hits 96% x position, wait 5 seconds and then run again). What is the easiest way to achieve this.. I tried wrapping the setInterval in another set interval but the problem here is that only runs it more often (and makes it go crazy). I know there is also a method called clearInterval and i am thinking maybe using that every few seconds would work but then how do i restart the animation afterwards?? I need it running over and over with a 5 second delay in between each run.

    function animateAlways() {

        var positionHeadDot = 0;
        var interval = 60;
        const diffHeadDot = 3.703704;


        shadeSparkle = setInterval(() => {
            /////////////////////HeadDot////////////////////////////////////
            document.getElementById("imageHeadDot").style.backgroundPosition =
                `${positionHeadDot}% 0%`;
            if (positionHeadDot < 96) {

                positionHeadDot = positionHeadDot + diffHeadDot;

            }
            else {

                positionHeadDot = 0;

            }
        }, interval); 

    } 

    animateAlways()

Answer 1

Probably it is easier when you convert your setInterval code to use setTimeout . Then you can distinguish between the progress and final step and provide an adjusted timeout value:

function animateAlways() {
    var positionHeadDot = 0;
    var interval = 60;
    var delay = 5000;
    const diffHeadDot = 3.703704;

    function animate() {
        /////////////////////HeadDot////////////////////////////////////
        document.getElementById("imageHeadDot").style.backgroundPosition =
            `${positionHeadDot}% 0%`;
        if (positionHeadDot < 96) {
            positionHeadDot = positionHeadDot + diffHeadDot;
            setTimeout(animate, interval);
        }
        else {
            positionHeadDot = 0;
            setTimeout(animate, delay); // 5 second wait.
        }
    }
    animate();
} 

Answer 2

You could add an outer setInterval , then use clearInterval to clear the inner interval instead of setting the position back to 0:

 function animateAlways() { var positionHeadDot = 0; var interval = 60; const diffHeadDot = 3.703704; shadeSparkle = setInterval(() => { /////////////////////HeadDot//////////////////////////////////// document.getElementById("imageHeadDot").style.backgroundPosition = `${positionHeadDot}% 0%`; if (positionHeadDot < 96) { positionHeadDot = positionHeadDot + diffHeadDot; } else { clearInterval(shadeSparkle); } }, interval); } animateAlways(); setInterval(animateAlways, 5000); 

 #imageHeadDot { background-image: url('https://www.w3schools.com/CSSref/smiley.gif'); width: 600px; height: 50px; border: 3px solid black; } 

 <div id="imageHeadDot"></div>