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

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

该代码在每个setInterval()呼叫添加到$("div") jQuery对象的.queue()的功能。您可以拨打.stop(true, true)或.finish()上$("div")完成当前的动画和jQuery对象

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() 
 
})

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

Firsly，该按钮具有类.stop，不.end
其次，你已经设置的0.001秒（1毫秒）的间隔，这意味着你queing了大量的动画不会当你停止这个时间间隔时，你就会离开。

你必须瞄准正确类，然后将间隔设置为一个更合适的时间

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() { 
 
    \t 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 3

你在“延迟”有问题从setInterval的

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

清除动画队列

不使用间隔，使用stop（）

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'); 
 
})

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" />