JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

html, body, div {
    height: 100%;
    width: 100%;
}

div {
    background-color: #FFF0F5;
    height: 50%;
    left: 25%;
    position: relative;
    top: 25%;
    width: 50%;
}

JavaScript

var div = document.getElementsByTagName("div")[0];

var iterator = new LoopIterator([1, 2, 3], function (element, time) {
    alert(element);
}, 3000);

div.addEventListener("mouseout", iterator.start, false);
div.addEventListener("mouseover", iterator.stop, false);

iterator.start();

function LoopIterator(array, callback, interval) {
    var start, iterate, timeout;

    this.start = function () {
        if (!iterate) {
            start = + new Date;
            iterate = true;
            loop();
        }
    };

    this.stop = function () {
        if (iterate) {
            clearTimeout(timeout);
            iterate = false;
        }
    };

    function loop() {
        var element = array.shift();
        callback(element, new Date - start);
        array.push(element);

        if (iterate) timeout = setTimeout(loop, interval);
    }
}