clearInterval不起作用

Question

Hi I am calling function on click when autoswitch = true function also calls setInterval and set autoswitch value to false by clicking again calling clearInterval which doesn't work.

Need some help

$(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

You need to declare setIntr outside of the click function. So you could set it at the top of the ready function.

I have gone and fixed your code here: 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 2

It is because you are defining setIntr as a local variable to that function. Once it goes out of scope and is called again you no longer have a handle on that interval. You need to define the var out of scope somewhere. I would make it a global, but I'm sure there might be better ways

Answer 3

you just have to add variable " setIntr " out side the if condition as like below:

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

As you have declared "setIntr" in If Condition which is not accessible in else, so if you want to use it in else as well then you have to declare it out side the if or globally.

EDITED: you are trying to set the value in one condition and checking in else. in this case you must have to declare the " setIntr " as global variable.

so the working code should be like the following:

declare " setIntr " globally in document.ready

then use the below code:

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