setInterval函数可以自行停止吗？

Question

我有一个jsFiddle得到一个例子来工作.

$().ready(function() {
    $('.test').each(function() {
        $this = $(this);
        $this.data('Worker', function() {
            $('#stop').html((parseInt($('#stop').html()) + 1))
        })
        setInterval($this.data('Worker'), 100);
    });

    $('#stop').click(function() {
        // I want the worker function to stop being triggered here
        $('.test').remove();
    });
});

我想要做的是将一个worker函数附加到DOM中的元素,以便在删除元素时,worker函数停止.

这样的事情可能吗？

Answer 1

晚了,但我解决了这个问题:

var id = setInterval(function()
{
    if(some_condition)
    {
        clearInterval(id);
    }
}, 1000);

绝对是最简单的方法:没有不必要的存储,没有技巧.

Answer 2

干得好:

var stopBtn = $( '#stop' );

$( '.test' ).each(function ( i, elem ) {
    var tid = setInterval(function () {
        if ( elem.parentNode ) {
            stopBtn.html(function ( i, num ) { return parseInt(num,10) + 1; });
        } else {
            clearInterval( tid );
        }
    }, 1000);
});

stopBtn.click(function () {
    $( '.test' ).remove();
});

说明:

首先我们需要一个闭包 - 区间函数需要知道哪个test-DIV是它的"所有者",因此,我们需要将对DIV的引用传递给区间函数.在我的代码中,该引用存储在elem变量中,由于闭包,该变量在interval函数内可用.因此,interval函数检查其"owner"DIV是否仍然附加到DOM(通过检查其父节点).如果是,则停止按钮递增.如果不是,则清除间隔.但是,为了能够清除间隔,我们需要其计时器ID.我们有这个ID,因为我们将它存储在"tid"变量中(setInterval调用返回计时器ID).

现场演示: http ://jsfiddle.net/simevidas/ZjY7k/15/