清除使用 setInterval 创建的变量的多个实例

Question

问题描述 (Fiddle)：

我正在尝试通过类上的 mousedown 事件清除使用 setInterval 创建的变量的多个实例。在提供的示例中，如果您只单击一次黑框，小猫会闪烁两次，然后变量将被取消设置。

如果您在 5 秒内多次单击黑框，则会出现多个小猫实例，并且永远不会删除后续单击。为什么清除 red 不清除变量的所有实例？

我知道我可以通过设置一个标志来“锁定”点击，但有没有更优雅的方法来解决这个问题，也许利用this 或其他一些奇特的结构？如果不是red，这些后续变量又是什么？

代码：

var red;

$('.container').mousedown(function() {
    red = window.setInterval(function() {
        $('<img src="http://placekitten.com/g/25/25" />').appendTo('body').animate({
            'opacity': 0
        }, 1000, function(){ $(this).remove(); });
    }, 2000);

    setTimeout(function() {
        window.clearInterval(red);
    }, 5000);

});

Answer 1

“为什么清除红色不会擦除变量的所有实例？”。

事实上，确实如此。您的代码非常清晰，您只是在 5 秒后清除间隔。因此，如果您单击该元素 20 次，您将创建 20 个间隔。如果您只希望它触发一次，则需要在设置新的间隔之前清除间隔。

例如，把这个放在你设置间隔之前：

window.clearInterval(red);

jsFiddle：http://jsfiddle.net/ngDTV/9/