如何在特定元素之后激活clearInterval()

Question

我有五个正方形。当我点击按钮时，方块会随着setInterval上下移动。clearInterval函数运行良好。但是我真正想要的是，当我点击激活clearInterval时，在最后一个正方形下降后工作的方法。

HTML代码如下:

<div id="box-holder" class="down">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<div id="button-group">
  <button id="btn-move" class="stopped">Move Box</button>
  <button id="btn-active">Active Click</button>
</div>

这是JS代码:

var blocksInterval;
function clicked() {
    $('#btn-move').trigger('click');
}
function startClick() {
    blocksInterval = setInterval(clicked,200);
}
function stopClick() {
    clearInterval(blocksInterval);
}
$('#btn-active').click(function() {
    $(this).html('Stop');
    if( $('#btn-move').hasClass('stopped') ) {
        $('#btn-move').removeClass('stopped');
        startClick();
    } else {
        $(this).html('Active Click');
        $('#btn-move').addClass('stopped');
        stopClick();
    }
});

Answer 1

跟踪正在使用动画并具有'stopped'类的元素的数量。如果"未移动"元素的数量与"已停止"元素的数量相同，则所有元素都已停止。点击功能的更改如下:

$('#btn-active').click(function() {
    $(this).html('Stop');
    if( $('#btn-move').hasClass('stopped') ) {
        $('#btn-move').removeClass('stopped');
        startClick();
    } else {
        $(this).html('Active Click');
        $('#btn-move').addClass('stopped');
        // stopClick();
        if($('#btn-move').length == $('#btn-move.stopped').length){ stopClick(); }
    }
});