javascript - 清除间隔不起作用

Question

您好，当 autoswitch = true 函数还调用 setInterval 时，我在单击时调用函数，并通过再次单击调用clearInterval 将 autoswitch 值设置为 false，但这不起作用。

需要一些帮助

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

您需要在click函数之外声明setIntr。所以你可以将它设置在ready函数的顶部。

我已经在这里修复了您的代码: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);
  }
});