javascript - クリック後に回転時間をリセットする方法

Question

現在、ニューススライダーを開発していますが、問題なく正常に動作します

スライダーには、特定の新しいものにジャンプするための 5 つのアイコンがあります。ここで問題が発生します。

回転時間は4秒で、アイコンをクリックすると新しいアイコンにジャンプしますが、時間は最初から開始されず、残りの4秒を完了して次の時間に回転します

回転のコードの下、最初から始めてほしい

time_id = setTimeout(Rotate, 4000);

function Rotate() {

    var class_name = $('.list_items li').eq(0).attr('class');

    var class_name_2 = $('li.small_to_large').removeClass('small_to_large').attr('class');  
    $('.' + class_name_2).css({display: 'block'});

    $('.' + class_name).before($('.' + class_name_2));

    $('.' + class_name).addClass('small_to_large');
    $('.' + class_name).css({display:'none'});

    $('div.large-12').before($('.' + class_name));

    $('.one-slide img').attr('src',$('li.small_to_large img').attr('src'));
    $('.one-slide h1').html($('.small_to_large h1').html());
    $('.one-slide p.small_desc').html($('.small_to_large p.small_desc').html());
    $('.one-slide p.disc').html($('.small_to_large p.disc').html());

    seeker();
    time_id = setTimeout(Rotate_1, 4000);
}
function Rotate_1() {

    var class_name = $('.list_items li').eq(0).next().attr('class');

    var class_name_2 = $('li.small_to_large').removeClass('small_to_large').attr('class');  
    $('.' + class_name_2).css({display: 'block'});

    $('.' + class_name).before($('.' + class_name_2));

    $('.' + class_name).addClass('small_to_large');
    $('.' + class_name).css({display:'none'});

    $('div.large-12').before($('.' + class_name));

    $('.one-slide img').attr('src',$('li.small_to_large img').attr('src'));
    $('.one-slide h1').html($('.small_to_large h1').html());
    $('.one-slide p.small_desc').html($('.small_to_large p.small_desc').html());
    $('.one-slide p.disc').html($('.small_to_large p.disc').html());

    seeker();
    time_id = setTimeout(Rotate_2, 4000);
}
function Rotate_2() {

    var class_name = $('.list_items li').eq(0).next().next().attr('class');

    var class_name_2 = $('li.small_to_large').removeClass('small_to_large').attr('class');  
    $('.' + class_name_2).css({display: 'block'});

    $('.' + class_name).before($('.' + class_name_2));

    $('.' + class_name).addClass('small_to_large');
    $('.' + class_name).css({display:'none'});

    $('div.large-12').before($('.' + class_name));

    $('.one-slide img').attr('src',$('li.small_to_large img').attr('src'));
    $('.one-slide h1').html($('.small_to_large h1').html());
    $('.one-slide p.small_desc').html($('.small_to_large p.small_desc').html());
    $('.one-slide p.disc').html($('.small_to_large p.disc').html());

    seeker();
    time_id = setTimeout(Rotate_3, 4000);
}
function Rotate_3() {

    var class_name = $('.list_items li').eq(0).next().next().next().attr('class');

    var class_name_2 = $('li.small_to_large').removeClass('small_to_large').attr('class');  
    $('.' + class_name_2).css({display: 'block'});

    $('.' + class_name).before($('.' + class_name_2));

    $('.' + class_name).addClass('small_to_large');
    $('.' + class_name).css({display:'none'});

    $('div.large-12').before($('.' + class_name));

    $('.one-slide img').attr('src',$('li.small_to_large img').attr('src'));
    $('.one-slide h1').html($('.small_to_large h1').html());
    $('.one-slide p.small_desc').html($('.small_to_large p.small_desc').html());
    $('.one-slide p.disc').html($('.small_to_large p.disc').html());

    seeker();
    time_id = setTimeout(Rotate, 4000);
}

function seeker(){
    $('.one-slide .seeker i').animate({width: '100%'},4000, function() {
        $('.one-slide .seeker i').css({width: 0});
    });
}

アイコンクリックのコード

$(document).on('click', '.list_items li',  function(){

    var class_name = $(this).attr('class');

    var class_name_2 = $('li.small_to_large').removeClass('small_to_large').attr('class');  
    $('.' + class_name_2).css({display: 'block'});

    $('.' + class_name).before($('.' + class_name_2));

    $('.' + class_name).addClass('small_to_large');
    $('.' + class_name).css({display:'none'});

    $('div.large-12').before($('.' + class_name));


    $('.one-slide img').attr('src',$('li.small_to_large img').attr('src'));
    $('.one-slide h1').html($('.small_to_large h1').html());
    $('.one-slide p.small_desc').html($('.small_to_large p.small_desc').html());
    $('.one-slide p.disc').html($('.small_to_large p.disc').html());

    $('.one-slide .seeker i').css({width: 0});
    seeker();

});

前もって感謝します ：）