JQuery関数の変数の値を変更できません

Question

スライダー用のスクリプトを作成しました。私のコードでは、デフォルト値がtrueのautoswitchという変数を定義し、autoswitch == trueの場合はスライドを変更します。しかし、ユーザーがスライドの矢印をクリックした場合、autoswitchはfalseに変更されます。私のコードは以下の通りです：

$(document).ready(function() { 
// Initiate variables 
var speed = 500; 
var autoswitch = true; 
var autoswitch_speed = 5000; 

// Add initial active class 
$('.slide').first().addClass('active'); 

// Hide all slides 
$('.slide').hide(); 

$('.slide').first().show(); 

$('#next').click(function() { 
    autoswitch = false; 
    $('.active').removeClass('active').addClass('oldActive'); 
    if($('.oldActive').is(':last-child')){ 
     $('.slide').first().addClass('active'); 
    } else{ 
     $('.oldActive').next().addClass('active'); 
    } 
    $('.oldActive').removeClass('oldActive'); 
    $('.slide').fadeOut(speed); 
    $('.active').fadeIn(speed); 
}); 
$('#prev').click(function() { 
    autoswitch = false; 
    $('.active').removeClass('active').addClass('oldActive'); 
    if($('.oldActive').is(':first-child')){ 
     $('.slide').last().addClass('active'); 
    } else{ 
     $('.oldActive').prev().addClass('active'); 
    } 
    $('.oldActive').removeClass('oldActive'); 
    $('.slide').fadeOut(speed); 
    $('.active').fadeIn(speed); 
}); 

if(autoswitch){ 
    setInterval(function() { 
     $('.active').removeClass('active').addClass('oldActive'); 
     if($('.oldActive').is(':last-child')){ 
      $('.slide').first().addClass('active'); 
     } else{ 
      $('.oldActive').next().addClass('active'); 
     } 
     $('.oldActive').removeClass('oldActive'); 
     $('.slide').fadeOut(speed); 
     $('.active').fadeIn(speed); 
    }, autoswitch_speed); 
} 
}); 

を私は、関数の最初の行にautoswitch = false;の値を変更すると、クリック上の2つのスライダーの矢印と、それらの両方を持っているが、このトリックは動作しても、矢印をクリックした後はありません、スライドが自動的に切り替わります！問題を解決するにはどうしたらいいですか？

Answer 1

ページロード時にsetIntervalオブジェクトを既に作成しているため、この問題が発生しています。あなたは

var refreshIntervalId = setInterval(function() { 
    $('.active').removeClass('active').addClass('oldActive'); 
    if($('.oldActive').is(':last-child')){ 
     $('.slide').first().addClass('active'); 
    } else{ 
     $('.oldActive').next().addClass('active'); 
    } 
    $('.oldActive').removeClass('oldActive'); 
    $('.slide').fadeOut(speed); 
    $('.active').fadeIn(speed); 
}, autoswitch_speed); 

にあなたのコードを更新する必要がありtimer object

autoswitch = false上の問題は、あなたが必要とすることを停止するようにしたsetIntervalを開始しているある autoswitch = false

clearInterval(refreshIntervalId); 

Answer 2

でそれを呼び出し、削除する必要があります矢印をクリックしてclearIntervalを呼び出す

あなたのために動作するはずのコードを試してください

$(document).ready(function() { 
    // Initiate variables 
    var speed = 500; 
    var autoswitch = true; 
    var autoswitch_speed = 5000; 

    // Add initial active class 
    $('.slide').first().addClass('active'); 

    // Hide all slides 
    $('.slide').hide(); 

    $('.slide').first().show(); 

    $('#next').click(function() { 
     clearInterval(cleanVar); 
     $('.active').removeClass('active').addClass('oldActive'); 
     if($('.oldActive').is(':last-child')){ 
      $('.slide').first().addClass('active'); 
     } else{ 
      $('.oldActive').next().addClass('active'); 
     } 
     $('.oldActive').removeClass('oldActive'); 
     $('.slide').fadeOut(speed); 
     $('.active').fadeIn(speed); 
    }); 
    $('#prev').click(function() { 
     clearInterval(cleanVar); 
     $('.active').removeClass('active').addClass('oldActive'); 
     if($('.oldActive').is(':first-child')){ 
      $('.slide').last().addClass('active'); 
     } else{ 
      $('.oldActive').prev().addClass('active'); 
     } 
     $('.oldActive').removeClass('oldActive'); 
     $('.slide').fadeOut(speed); 
     $('.active').fadeIn(speed); 
    }); 



     var cleanVar = setInterval(autoScroll, autoswitch_speed); 

    }); 

    function autoScroll() { 
      $('.active').removeClass('active').addClass('oldActive'); 
      if($('.oldActive').is(':last-child')){ 
       $('.slide').first().addClass('active'); 
      } else{ 
       $('.oldActive').next().addClass('active'); 
      } 
      $('.oldActive').removeClass('oldActive'); 
      $('.slide').fadeOut(speed); 
      $('.active').fadeIn(speed); 
     }