clearInterval不起作用

clearInterval not working

本文关键字：不起作用 clearInterval      更新时间：2023-09-26

嗨，当autoswitch=true时，我在点击时调用函数。函数还调用setInterval，并通过再次点击调用clearInterval将自动切换值设置为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);
  }
});

您需要在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);
  }
});

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

您只需要在if条件之外添加变量"setIntr"，如下所示：

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

正如你在If Condition中声明的"setIntr"在else中是不可访问的，所以如果你想在else也使用它，那么你必须在If或全局之外声明它。

编辑：您正在尝试在一个条件中设置值，然后签入其他条件。在这种情况下，您必须将"setIntr"声明为全局变量。

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

在document.ready 中全局声明"setIntr"

然后使用以下代码：

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