如何清除存储在变量中的间隔？

Question

这是我的代码：

var isBlinking = null;

function blink(el) {
    el.fadeTo('slow', 0.2).fadeTo('slow', .8);
}

$('.start').on('click', function(){
  isBlinking = setInterval(function () {
    blink($('div'));
  }, 1);
})

$('.stop').on('click', function(){
  clearInterval(isBlinking);
})

div{
  width: 20px;
  height: 20px;
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<br />
<input type="button" class="start" value="start" />
<input type="button" class="stop" value="stop" />

如您所见，stop按钮不会停止闪烁。怎么了？我该怎么办呢？

Answer 1

首先，该按钮具有班级.stop，而不是.end
其次，你设置了0.001秒的间隔（1毫秒），这意味着你要排除大量的动画，这些动画不会在你停止间隔时消失。

您必须定位正确的类，然后将间隔设置为更合适的时间

var isBlinking = null;

function blink(el) {
    el.fadeTo('slow', 0.2).fadeTo('slow', .8);
}

$('.start').on('click', function(){
  isBlinking = setInterval(function () {
    blink($('div'));
  }, 1400);
  blink($('div'))
})

$('.stop').on('click', function(){
  clearInterval(isBlinking);
})

div{
  width: 20px;
  height: 20px;
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<br />
<input type="button" class="start" value="start" />
<input type="button" class="stop" value="stop" />

一个更好的方法，就是让你拥有任意数量的计时器，就是使用jQuery的data()来存储对间隔的引用，而不是变量，并调用stop()来制作确定动画停止

function blink(el) {
  el.fadeTo('slow', 0.2).fadeTo('slow', .8);
}

$('.start').on('click', function(){
  $(this).data('timer', setInterval(function () {
  	blink($('div'));
  }, 1400));
  blink($('div'))
});

$('.stop').on('click', function(){
  clearInterval($(this).prev().stop(true,true).data('timer'));
});

div{
  width: 20px;
  height: 20px;
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<br />
<input type="button" class="start" value="start" />
<input type="button" class="stop" value="stop" />

Answer 2

代码在每个.queue()调用时向$("div") jQuery对象的setInterval()添加一个函数。您可以在.stop(true, true)上调用.finish()或$("div")完成当前动画并清除jQuery对象上的动画队列

＆＃13;

＆＃13;

var isBlinking = null;

function blink(el) {
    el.fadeTo('slow', 0.2).fadeTo('slow', .8);
}

$('.start').one('click', function(){
  isBlinking = setInterval(function () {
    blink($('div'));
  }, 1);
})

$('.stop').on('click', function(){
  clearInterval(isBlinking);
  $("div").finish()
})

＆＃13;

div{
  width: 20px;
  height: 20px;
  background-color: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<br />
<input type="button" class="start" value="start" />
<input type="button" class="stop" value="stop" />

＆＃13;

＆＃13;

＆＃13;

Answer 3

你在＆＃34;延迟＆＃34;中遇到了问题。来自setInterval

  isBlinking = setInterval(function () {
    blink($('div'));
  }, 1000);

请勿使用间隔，请使用stop（）

＆＃13;

＆＃13;

var isBlinking = -1;

function blink(el) {
    el.fadeTo('slow', 0.2).fadeTo('slow', .8, function() {
        blink(el);
    });
}

$('.start').on('click', function(){
  blink($('div'));
})

$('.stop').on('click', function(){
  $('div').stop(true).removeAttr('style');
})

＆＃13;

div{
  width: 20px;
  height: 20px;
  background-color: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<br />
<input type="button" class="start" value="start" />
<input type="button" class="stop" value="stop" />

＆＃13;

＆＃13;

＆＃13;