clearIntervalが機能しません

Question

こんにちは私はautoswitch = true関数を呼び出すときにsetIntervalを呼び出し、autoswitchの値をfalseに設定します。これは再び動作しないclearIntervalを呼び出します。

あなたはその関数にローカル変数としてsetIntrを定義しているので、それがある

$(document).ready(function() { 
    var speed = 500; 
    var autoswitch = true; 
    var autoswitch_speed = 4000; 

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

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

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

    // Click next to show next slide 
    $('#next').click(function() { 
    nextSlide(); 
    }); 

    //Onclick go to prev slide 
    $('#prev').click(function() { 
    prevSlide(); 
    }); 

    //play auto slide show 
    $('#playBtn').click(function() { 
    if (autoswitch === true) { 
     var setIntr = setInterval(nextSlide, autoswitch_speed); 
     autoswitch = false; 
    } else { 
     clearInterval(setIntr); 
     autoswitch = true; 
    } 
    }); 

    // next slide function 
    function nextSlide() { 
    $('.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); 
    } 

    // Prev slide function   
    function prevSlide() { 
    $('.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); 
    } 
}); 

Answer 1

いくつかの助けを必要としています。範囲外になり、再び呼び出されると、その間隔でハンドルがなくなります。範囲外のvarをどこかで定義する必要があります。私はそれがグローバルになるだろうが、私はあなたがクリック機能のsetIntr外を宣言する必要がより良い方法

Answer 2

があるかもしれないと確信しています。 準備完了機能の上部に設定することができます。

私が行って、ここにコードを修正した：https://snippetbox.xyz/9eb54a2a1f52dc1f5d40/

$(document).ready(function() { 
    var speed = 500; 
    var autoswitch = true; 
    var autoswitch_speed = 4000; 
    var setIntr; 

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

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

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

    // Click next to show next slide 
    $('#next').click(function() { 
    nextSlide(); 
    }); 

    //Onclick go to prev slide 
    $('#prev').click(function() { 
    prevSlide(); 
    }); 

    //play auto slide show 
    $('#playBtn').click(function() { 
    if (autoswitch === true) { 
     setIntr = setInterval(nextSlide, autoswitch_speed); 
     autoswitch = false; 
    } else { 
     clearInterval(setIntr); 
     autoswitch = true; 
    } 
    }); 

    // next slide function 
    function nextSlide() { 
    $('.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); 
    } 

    // Prev slide function   
    function prevSlide() { 
    $('.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); 
    } 
}); 

Answer 3

あなただけの「setIntr」アウトサイドを変数に追加する必要があるかの条件として、以下のように：あなたのよう

$('#playBtn').click(function() { 
    var setIntr; 
    if (autoswitch === true) { 
    setIntr = setInterval(nextSlide, autoswitch_speed); 
    autoswitch = false; 
    } else { 
    clearInterval(setIntr); 
    autoswitch = true; 
    } 
    }); 

他の場合にアクセスできないIf条件で "setIntr"を宣言しました。そうすれば、他にも使用したい場合はifまたはグローバルに宣言する必要があります。

EDITED： 値を1つの条件に設定し、他にチェックインしようとしています。この場合、グローバル変数として "setIntr"を宣言する必要があります。

ので、作業コードは次のようにする必要があります： `VARのsetIntr`がある

$('#playBtn').click(function() { 
if (autoswitch === true) { 
    setIntr = setInterval(nextSlide, autoswitch_speed); 
    autoswitch = false; 
} else { 
    clearInterval(setIntr); 
    autoswitch = true; 
} 
});