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

您需要在点击功能之外声明 setIntr 。因此，您可以将其设置在就绪功能的顶部。

我已经离开并修改了您的代码：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

这是因为您将setIntr定义为该函数的局部变量。一旦它超出范围并再次调用，您就不再拥有该间隔的句柄。您需要在某处定义var超出范围。我会把它变成一个全球性的，但我确信可能有更好的方法

Answer 3

你只需要添加变量＆＃34; setIntr ＆＃34;如果条件如下：

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

正如你宣布＆＃34; setIntr＆＃34;如果在else中无法访问的条件，那么如果你想在else中使用它，那么你必须在if或global之外声明它。

<强>编辑：您正尝试在一个条件中设置值并检入其他条件。在这种情况下，您必须声明＆＃34; setIntr ＆＃34;作为全球变量。

因此工作代码应如下所示：

声明＆＃34; setIntr ＆＃34;全文在document.ready

然后使用以下代码：

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

clearInterval无法正常工作

3 个答案: