单击时的Javascript clearInterval

Question

我写了一个小函数，像这样每 5 秒移动/弹出一个按钮:

HTML:

<a href="#" class="button">Text</a>

JS:

var interval;
function buttonShake(){ 
    var times = 5;
    var speed = 300;
    var distance = '15px';

    for(var i = 0; i < times; i++) {
        twitterButton.animate({
            left: '-='+distance
        }, speed).animate({
            left: '+='+distance
        }, speed);
    }
}
interval = setInterval(buttonShake, 4000);

单击按钮时，它会从页面右侧滑出一个隐藏框。我想要做的是防止按钮在被点击后弹跳。

所以我尝试使用以下内容

button.on('click', function(e){

    // do the slideout animation
    // add "open" class to the box

    if(box.hasClass('open')){
        clearInterval(interval);
    }

});

button 和 box 元素已被正确定义并且 open 类在滑出后附加到框，但是清除间隔似乎不起作用。它仍然每 5 秒连续调用一次 buttonShake() 函数。

这是一个带有实时预览完整代码的 JSFiddle:

http://jsfiddle.net/30tsype8/3/

我是不是做错了什么？

Answer 1

我注意到如果你离开它一段时间，动画似乎会进入超速状态，而不是运行大约 3 秒并暂停一秒钟然后再次开始，它只是不断地跳动。我认为 jQuery 正在重叠其调用并变得困惑并陷入循环。

因为您想在他们展开面板时停止弹跳按钮，所以我会在面板展开后立即使用 finish() 完成动画。 :

twitterWrapper.animate({
    right: right
}, function() {
    twitterButton.finish();
});

Updated fiddle