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

Question

我正在制作一个简单的淡入/淡出循环动画，它使用setTimeout和clearTimeout。到目前为止，这是我的代码:

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的概念。我需要一些解决方案并帮助理解这两个函数。

Answer 1

这是一个 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/