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

跟踪使用动画的元素数量并使用“已停止”类。如果btn-move元素的数量与'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(); }
    }
});

如何在特定元素后激活clearInterval（）？

1 个答案: