javascript - 了解由setTimeout和clearTimeout组成的循环函数

我正在制作一个使用setTimeout和clearTimeout的简单的fadeIn / fadeOut循环动画。到目前为止，这是我的代码：

HTML：

<p><span>loading...</span></p>
<a href="#" id="btn">STOP</a>

Javascript（jQuery1.9.1）：

var _timer;
var _timerArr = [];

var loaderBlink = function() {
    $('p').find('span').fadeTo(200,.4).fadeTo(200,1,function() {
        _timer = setTimeout(function() { loaderBlink() }, 200);
        _timerArr.push(_timer);
        //console.log('loading...');
    });
};

var clearTimer = function() {
    $.each(_timerArr, function(i,val) {
        clearTimeout(val);
        console.log(val);
    });

    $('#btn').remove();
    $('p').fadeOut('fast');

    return false;
};

$('#btn').on('click', function() {
    clearTimer();
});

loaderBlink();

演示：http://jsfiddle.net/nori2tae/MW9E8/

问题是，即使我将所有计时器都放入一个数组中以通过单击“停止”按钮随后清除所有计时器，有时计时器也不会停止并且只会继续运行。

可能我不太了解setTimeout和clearTimeout的概念。我需要一些解决方案，并帮助理解这两个功能。

最佳答案

这是一个setIntevall版本：

编辑：它工作良好，但是您必须使用函数loaderBlink（）包装计时器。再次，将其误删除了，还没有足够的咖啡。

var _timer;

_timer = setInterval(function () {
            $('p').find('span').fadeTo(200,.4).fadeTo(200,1);
            console.log('loading...');
        }, 400);


var clearTimer = function() {
    clearInterval(_timer);

    $('#btn').remove();
    $('p').fadeOut('fast');

    return false;
};

$('#btn').on('click', function() {
    clearTimer();
});

http://jsfiddle.net/XHUTV/2/