如何清除存儲在變量中的區間？

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