Timer interval to call functions one after the other

by niki4810

HTML

<script src="https://rawgithub.com/flesler/jquery.scrollTo/master/jquery.scrollTo.js"></script>
<div class="container">
    <p>Hello</p>
    <p>World</p>
    <p>123!!!</p>
    <p>456!!!</p>
    <p>567!!!</p>
    <p>678!!!</p>
    <p>890!!!</p>
</div>
<p class="total">Total Elements Processed : <b></b>

</p>

CSS

.container{
    height: 100px;
    overflow-y: auto;
    overflow-x:hidden;
}
.highlight {
    color :red;
    padding-left:10px;
}

JavaScript

$(function () {
    var pEls = $(".container>p");
    var noOfElements = pEls.length;
    var i = 0;
    var interval = setInterval(function () {
        var pl = pEls.eq(i);
        $('div.container').scrollTo(pl);
        pl.removeClass("highlight").addClass("highlight");
        var myRemoveClass = removeMyClass(pl);
        var wait = window.setTimeout(myRemoveClass, 500);
        
        $(".total").find("b").text(i + 1);
        i = i + 1;
        if (i >= noOfElements) {
            window.clearInterval(interval);
        }
    }, 1000);

    var removeMyClass = function (pEl) {
        return function () {
            pEl.removeClass("highlight")
        };
    }
});