Как сбросить время вращения после нажатия

Question

Теперь я разработка новостей слайдера и работает должным образом без каких-либо проблем

Slider имеет 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(); 

}); 

заранее спасибо :)

Answer 1

clearTimeout() должен сделать это за вас. например

$(document).on('click', '.list_items li', function(){ 
clearTimeout(time_id); // should clear it for you 
..... 
seeker(); 
time_id = setTimeout(Rotate, 4000); // Now you can start it up again on the appropriate rotate. 
}); 

Update

Теперь вам просто нужно придумать способ вызова соответствующей функции поворота в зависимости от того, какой образ вы находитесь.

Answer 2

Этот код работает нормально :)

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

    clearTimeout(time_id); 
    $('.one-slide .seeker i').stop(true, true); 
    seeker(); 
    time_id = setTimeout(Rotate, 4000); 

    ................................ 
    ................................ 

}); 

благодарит Вас Тревора