Javascript 使用Jquery创建循环动画

我正在尝试使用Jquery和外部库创建循环动画，但setinterval和循环存在一些问题

  var p = ['Forex', 'Commodities', 'Index', 'Crypto']
var i = 0;
function eachChange(i) {

    $('.title').each(function(index, element) {
        console.log(p[i])
        var el = $(this);
        el.find('.text').html(p[i])

        el.find('.bar').animate({width:'70%'},600,$.myeas([0.7, 0, 0.175, 1]));
        setTimeout(function(){
            el.find('.text').animate({width:'100%'},600,$.myeas([0.7, 0, 0.175, 1]));

            setTimeout(function () {
                el.find('.text').delay(5000).animate({width: '0',}, 600, $.myeas([0.7, 0, 0.175, 1]));

                if( i <= p.length-1) {
                    console.log( i)
                    i++;
                    eachChange(i);
                }else{
                    console.log("restart")
                    eachChange(0);
                }

            }, 300)



        },5000 * (index + 1))


    });
}

var p=['外汇'，'商品'，'指数'，'加密']
var i=0；
功能每次更改（i）{
$（'.title'）。每个（函数（索引，元素）{
console.log（p[i]）
var el=$（本）；
el.find（'.text'）.html（p[i]）
动画（{width:'70%}，600，$.myeas（[0.7,0,0.175,1]）；
setTimeout（函数（）{
动画（{width:'100%}，600，$.myeas（[0.7,0,0.175,1]）；
setTimeout（函数（）{
el.find（'.text'）.delay（5000）.动画（{width:'0'，}，600，$.myeas（[0.7,0,0.175,1]）；
如果（i如果你需要每5秒做一件事，从setInterval开始，在回调函数中做所有需要做的事情。如果你这样做，你就不需要嵌套的setTimeout函数，这会降低复杂性

要在单词数组中继续循环，不需要将i重置为0。您可以始终使用i%p.length作为索引，并永远继续迭代i